@dhasdk/simple-ui 1.0.7 → 1.0.8

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

@@ -0,0 +1,107 @@
+import { Meta } from '@storybook/react';
+import { CheckBox, CheckBoxGroup, CheckBoxProps } from './CheckBox';
+
+// import imagePath from 'src/assets/img/pill.svg';
+const imagePath = 'src/assets/img/hospital.jpg';
+// imagePath: 'src/assets/img/heartbeat.svg',
+
+// Meta object - defines basic storybook options for this story
+export default {
+  title: 'Components/CheckBox',
+  component: CheckBox,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['','']
+      },
+    },
+  args: {
+    // label: 'Button', // set default argument values
+  },
+  parameters: {
+    layout: 'centered', // options are 'centered', 'fullscreen', and 'padded' (default value)
+    backgrounds: { default: 'light' }, // options are light, medium, or dark
+  },
+} as Meta<CheckBoxProps>;
+
+// Define "Default" story
+export const Default = {
+  args: {
+    ariaLabel: 'test label',
+    alt: 'image alt',
+    children: 'CheckBox 1'
+  }
+};
+
+export const Group = () => {
+  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
+  
+  return (
+    <>
+    <div className='mb-4'>Note: 'level' prop does not take effect w/o use of the CheckBoxContainer component.</div>
+    <CheckBox level={0}>Group 1</CheckBox>
+    <CheckBox level={1}>g1, item 1</CheckBox>
+    <CheckBox level={1}>g1, item 2</CheckBox>
+    <CheckBox level={0}>Group 2</CheckBox>
+    <CheckBox level={1}>g2, item 1</CheckBox>
+    <CheckBox level={1}>g2, item 2</CheckBox>
+    <CheckBox level={2}>g2, item 2, item 1</CheckBox>
+    </>
+  );
+};
+
+
+export const GroupContainer = () => {
+  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
+  
+  return (
+    <CheckBoxGroup>
+      <CheckBox level={0}>Group 1</CheckBox>
+      <CheckBox level={1}>g1, item 1</CheckBox>
+      <CheckBox level={1}>g1, item 2</CheckBox>
+      <CheckBox level={0}>Group 2</CheckBox>
+      <CheckBox level={1}>g2, item 1</CheckBox>
+      <CheckBox level={1}>g2, item 2</CheckBox>
+      <CheckBox level={2}>g2, item 2, item 1</CheckBox>
+    </CheckBoxGroup>
+  );
+};
+
+
+export const GroupContainer2 = () => {
+  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
+  
+  return (
+    <CheckBoxGroup>
+      <CheckBox level={0}>Group 1</CheckBox>
+      <CheckBox level={1}>g1, item 1</CheckBox>
+      <CheckBox level={1}>g1, item 2</CheckBox>
+      <CheckBox level={2}>g1, item 2, item 1</CheckBox>
+      <CheckBox level={2}>g1, item 2, item 2</CheckBox>
+      <CheckBox level={0}>Group 2</CheckBox>
+      <CheckBox level={1}>g2, item 1</CheckBox>
+      <CheckBox level={1}>g2, item 2</CheckBox>
+      <CheckBox level={2}>g2, item 2, item 1</CheckBox>
+    </CheckBoxGroup>
+  );
+};
+
+
+export const GroupContainer3 = () => {
+  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
+  
+  return (
+    <CheckBoxGroup>
+      <CheckBox level={0}>Group 1</CheckBox>
+      <CheckBox level={1}>g1, item 1</CheckBox>
+      <CheckBox level={1}>g1, item 2</CheckBox>
+      <CheckBox level={2}>g1, item 2, item 1</CheckBox>
+      <CheckBox level={2}>g1, item 2, item 2</CheckBox>
+      <CheckBox level={1}>g1, item 3</CheckBox>
+      <CheckBox level={0}>Group 2</CheckBox>
+      <CheckBox level={1}>g2, item 1</CheckBox>
+      <CheckBox level={1}>g2, item 2</CheckBox>
+      <CheckBox level={2}>g2, item 2, item 1</CheckBox>
+    </CheckBoxGroup>
+  );
+};

package/src/lib/CheckBox.spec.tsx

@@ -0,0 +1,412 @@
+import React, { createRef } from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { axe } from "vitest-axe";
+
+import { CheckBox, CheckBoxGroup } from "./CheckBox";
+
+// add jest-dom / vitest-dom matchers
+// expect.extend(toHaveNoViolations);
+
+describe("CheckBox component", () => {
+  it("should render unchecked by default and have no accessibility violations", async () => {
+    render(<main><CheckBox ariaLabel="accept terms">Accept terms</CheckBox></main>);
+
+    // find checkbox input
+    const input = screen.getByRole("checkbox", { name: "accept terms" });
+    expect(input).toBeInTheDocument();
+    expect(input).not.toBeChecked();
+
+    // icon img alt should reflect 'unchecked'
+    const img = screen.getByAltText("unchecked") as HTMLImageElement;
+    expect(img).toBeInTheDocument();
+    expect(img.src).toContain("check_box_empty.svg");
+
+    // axe accessibility scan
+    const results = await axe(document.body);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("toggles to checked on click and calls setStatusUpdate", async () => {
+    const mockSet = vi.fn();
+    render(
+      <CheckBox
+        ariaLabel="my box"
+        setStatusUpdate={mockSet}
+        index={0}
+      >
+        Label
+      </CheckBox>
+    );
+
+    const input = screen.getByRole("checkbox", { name: "my box" });
+    // click to check
+    await userEvent.click(input);
+    expect(input).toBeChecked();
+
+    // after toggle, the internal effect should call setStatusUpdate('checked', 0)
+    expect(mockSet).toHaveBeenCalledWith("checked", 0);
+
+    // the icon src should update to checked icon
+    const img = screen.getByAltText("checked") as HTMLImageElement;
+    expect(img.src).toContain("check_box.svg");
+  });
+
+
+  it("uses marker icon when checked with marker prop", async () => {
+    render(
+      <CheckBox
+        ariaLabel="marker box"
+        marker={true}
+        setStatusUpdate={vi.fn()}
+        index={0}
+      >
+        Marker
+      </CheckBox>
+    );
+
+    const input = screen.getByRole("checkbox", { name: "marker box" }) as HTMLInputElement;
+    // check it
+    await userEvent.click(input);
+    expect(input).toBeChecked();
+
+    // marker (unchecked) initially shows regular empty – marker only kicks in on checked
+    // now that it's checked, we expect the marker icon
+    const img = screen.getByAltText("checked") as HTMLImageElement;
+    expect(img.src).toContain("marker_check_by_default.svg");
+  });
+
+  it("uses filled marker icon when checked with marker and fill props", async () => {
+    render(
+      <CheckBox
+        ariaLabel="filled marker box"
+        marker={true}
+        fill={true}
+        setStatusUpdate={vi.fn()}
+        index={0}
+      >
+        Filled Marker
+      </CheckBox>
+    );
+
+    const input = screen.getByRole("checkbox", { name: "filled marker box" }) as HTMLInputElement;
+    // check it
+    await userEvent.click(input);
+    expect(input).toBeChecked();
+
+    // with fill and marker, we expect the filled marker icon
+    const img = screen.getByAltText("checked") as HTMLImageElement;
+    expect(img.src).toContain("marker_check_by_default_fill.svg");
+  });
+
+});
+
+
+// CHECKBOX GROUP COMPONENT --------------------------
+
+describe("CheckBoxGroup component", () => {
+
+  const Siblings = (props: { bridgeParent?: boolean }) => (
+    <CheckBoxGroup bridgeParent>
+      <CheckBox level={0} ariaLabel="item A">A</CheckBox>
+      <CheckBox level={0} ariaLabel="item B">B</CheckBox>
+      <CheckBox level={1} ariaLabel="item BA">BA</CheckBox>
+      <CheckBox level={1} ariaLabel="item BB">BB</CheckBox>
+      <CheckBox level={2} ariaLabel="item BBA">BBA</CheckBox>
+      <CheckBox level={2} ariaLabel="item BBB">BBB</CheckBox>
+      <CheckBox level={2} ariaLabel="item BBC">BBC</CheckBox>
+      <CheckBox level={1} ariaLabel="item BC">BC</CheckBox>
+      <CheckBox level={0} ariaLabel="item C">C</CheckBox>
+      <CheckBox level={1} ariaLabel="item CA">CA</CheckBox>
+      <CheckBox level={2} ariaLabel="item CAA">CAA</CheckBox>
+      <CheckBox level={2} ariaLabel="item CAB">CAB</CheckBox>
+      <CheckBox level={2} ariaLabel="item CAC">CAC</CheckBox>
+    </CheckBoxGroup>
+  );
+
+
+  const SiblingsFill = (props: { bridgeParent?: boolean }) => (
+    <CheckBoxGroup bridgeParent fill>
+      <CheckBox level={0} ariaLabel="item A">A</CheckBox>
+      <CheckBox level={0} ariaLabel="item B">B</CheckBox>
+      <CheckBox level={1} ariaLabel="item BA">BA</CheckBox>
+      <CheckBox level={1} ariaLabel="item BB">BB</CheckBox>
+      <CheckBox level={2} ariaLabel="item BBA">BBA</CheckBox>
+      <CheckBox level={2} ariaLabel="item BBB">BBB</CheckBox>
+      <CheckBox level={2} ariaLabel="item BBC">BBC</CheckBox>
+      <CheckBox level={1} ariaLabel="item BC">BC</CheckBox>
+      <CheckBox level={0} ariaLabel="item C">C</CheckBox>
+      <CheckBox level={1} ariaLabel="item CA">CA</CheckBox>
+      <CheckBox level={2} ariaLabel="item CAA">CAA</CheckBox>
+      <CheckBox level={2} ariaLabel="item CAB">CAB</CheckBox>
+      <CheckBox level={2} ariaLabel="item CAC">CAC</CheckBox>
+    </CheckBoxGroup>
+  );
+
+
+
+  /**
+   * Build a tiny hierarchy:
+   * - parent (level 0)
+   *   - child 1 (level 1)
+   *   - child 2 (level 1)
+   */
+  const Parent = () => (
+    <CheckBoxGroup>
+      <CheckBox level={0} ariaLabel="parent">Parent</CheckBox>
+      <CheckBox level={1} ariaLabel="child 1">Child 1</CheckBox>
+      <CheckBox level={1} ariaLabel="child 2">Child 2</CheckBox>
+    </CheckBoxGroup>
+  );
+
+  it("checks all children when parent is clicked", async () => {
+    render(<Parent />);
+
+    const parentInput = screen.getByRole("checkbox", { name: "parent" });
+    const child1 = screen.getByRole("checkbox", { name: "child 1" });
+    const child2 = screen.getByRole("checkbox", { name: "child 2" });
+
+    // click parent → should check parent and both children
+    await userEvent.click(parentInput);
+    expect(parentInput).toBeChecked();
+    expect(child1).toBeChecked();
+    expect(child2).toBeChecked();
+  });
+
+  it("sets parent to indeterminate if only one child is checked", async () => {
+    render(<Parent />);
+
+    const parentInput = screen.getByRole("checkbox", { name: "parent" }) as HTMLInputElement;
+    const child1 = screen.getByRole("checkbox", { name: "child 1" });
+    const child2 = screen.getByRole("checkbox", { name: "child 2" });
+
+    // click only the first child
+    await userEvent.click(child1);
+    expect(child1).toBeChecked();
+    expect(child2).not.toBeChecked();
+
+    // parent should now be indeterminate
+    expect(parentInput.indeterminate).toBe(true);
+  });
+
+  it("unchecks all children when parent is clicked twice", async () => {
+    render(<Parent />);
+
+    const parentInput = screen.getByRole("checkbox", { name: "parent" });
+    const child1 = screen.getByRole("checkbox", { name: "child 1" });
+    const child2 = screen.getByRole("checkbox", { name: "child 2" });
+
+    // first click → all checked
+    await userEvent.click(parentInput);
+    expect(child1).toBeChecked();
+    expect(child2).toBeChecked();
+
+    // second click → all unchecked
+    await userEvent.click(parentInput);
+    expect(parentInput).not.toBeChecked();
+    expect(child1).not.toBeChecked();
+    expect(child2).not.toBeChecked();
+  });
+
+
+  // Uses SIBLINGS
+  it("only toggles the clicked checkbox among siblings at the same level", async () => {
+    render(<Siblings />);
+
+    const [a, b, ba, bb, bba, bbb, bbc, bc, c, ca, caa, cab, cac] = ["item A", "item B", "item BA", 
+        "item BB", "item BBA", "item BBB", "item BBC", "item BC", "item C",
+        "item CA", "item CAA", "item CAB", "item CAC"].map(name =>
+      screen.getByRole("checkbox", { name }) as HTMLInputElement
+    );
+
+    // click A → only A becomes checked
+    await userEvent.click(a);
+    expect(a).toBeChecked();          // Checked
+    expect(b).not.toBeChecked();
+    expect(ba).not.toBeChecked();
+    expect(bb).not.toBeChecked();
+    expect(bba).not.toBeChecked();
+    expect(bbb).not.toBeChecked();
+    expect(bbc).not.toBeChecked();
+    expect(bc).not.toBeChecked();
+    expect(c).not.toBeChecked();
+
+    // click B → A remains checked, B toggles on, C stays off
+    await userEvent.click(b);
+    expect(a).toBeChecked();          // Checked
+    expect(b).toBeChecked();          // Checked
+    expect(ba).toBeChecked();         // Checked
+    expect(bb).toBeChecked();         // Checked
+    expect(bba).toBeChecked();        // Checked
+    expect(bbb).toBeChecked();        // Checked
+    expect(bbc).toBeChecked();        // Checked
+    expect(bc).toBeChecked();         // Checked
+    expect(c).not.toBeChecked();
+
+    // click A again → A toggles off, B stays on, C stays off
+    await userEvent.click(a);
+    expect(a).not.toBeChecked();
+    expect(b).toBeChecked();          // Checked
+    expect(ba).toBeChecked();         // Checked
+    expect(bb).toBeChecked();         // Checked
+    expect(bba).toBeChecked();        // Checked
+    expect(bbb).toBeChecked();        // Checked
+    expect(bbc).toBeChecked();        // Checked
+    expect(bc).toBeChecked();         // Checked
+    expect(c).not.toBeChecked();
+
+    // click BB → A remains unchecked, BB toggles off
+  // click BB → BB and its descendants are unchecked; B should become indeterminate
+    await userEvent.click(bb);
+
+    // first grab everything as HTMLInputElements
+    const bInput = b as HTMLInputElement;
+
+    expect(a).not.toBeChecked();
+
+    // instead of expecting B to be unchecked, we assert that:
+    //  • it's not checked,
+    //  • but it *is* indeterminate
+    expect(bInput.checked).toBe(false);
+    expect(bInput.indeterminate).toBe(true);
+
+    // BA stays checked
+    expect(ba).toBeChecked();
+
+    // BB itself is now unchecked
+    expect(bb).not.toBeChecked();
+
+    // its children (BBA, BBB, BBC) are all unchecked
+    expect(bba).not.toBeChecked();
+    expect(bbb).not.toBeChecked();
+    expect(bbc).not.toBeChecked();
+
+    // BC (sibling-child of B) remains checked
+    expect(bc).toBeChecked();
+
+    expect(c).not.toBeChecked();
+
+
+    await userEvent.click(caa);
+    expect(c).not.toBeChecked();
+    expect(ca).not.toBeChecked();
+    expect(caa).toBeChecked();
+    expect(cab).not.toBeChecked();
+    expect(cac).not.toBeChecked();
+  });
+
+
+  it("only toggles the clicked checkbox among siblings at the same level - fill variant", async () => {
+    render(<SiblingsFill />);
+
+    const [a, b, ba, bb, bba, bbb, bbc, bc, c, ca, caa, cab, cac] = ["item A", "item B", "item BA", 
+        "item BB", "item BBA", "item BBB", "item BBC", "item BC", "item C",
+        "item CA", "item CAA", "item CAB", "item CAC"].map(name =>
+      screen.getByRole("checkbox", { name }) as HTMLInputElement
+    );
+
+    // click A → only A becomes checked
+    await userEvent.click(a);
+    expect(a).toBeChecked();          // Checked
+    expect(b).not.toBeChecked();
+    expect(ba).not.toBeChecked();
+    expect(bb).not.toBeChecked();
+    expect(bba).not.toBeChecked();
+    expect(bbb).not.toBeChecked();
+    expect(bbc).not.toBeChecked();
+    expect(bc).not.toBeChecked();
+    expect(c).not.toBeChecked();
+
+    // click B → A remains checked, B toggles on, C stays off
+    await userEvent.click(b);
+    expect(a).toBeChecked();          // Checked
+    expect(b).toBeChecked();          // Checked
+    expect(ba).toBeChecked();         // Checked
+    expect(bb).toBeChecked();         // Checked
+    expect(bba).toBeChecked();        // Checked
+    expect(bbb).toBeChecked();        // Checked
+    expect(bbc).toBeChecked();        // Checked
+    expect(bc).toBeChecked();         // Checked
+    expect(c).not.toBeChecked();
+
+    // click A again → A toggles off, B stays on, C stays off
+    await userEvent.click(a);
+    expect(a).not.toBeChecked();
+    expect(b).toBeChecked();          // Checked
+    expect(ba).toBeChecked();         // Checked
+    expect(bb).toBeChecked();         // Checked
+    expect(bba).toBeChecked();        // Checked
+    expect(bbb).toBeChecked();        // Checked
+    expect(bbc).toBeChecked();        // Checked
+    expect(bc).toBeChecked();         // Checked
+    expect(c).not.toBeChecked();
+
+    // click BB → A remains unchecked, BB toggles off
+  // click BB → BB and its descendants are unchecked; B should become indeterminate
+    await userEvent.click(bb);
+
+    // first grab everything as HTMLInputElements
+    const bInput = b as HTMLInputElement;
+
+    expect(a).not.toBeChecked();
+
+    // instead of expecting B to be unchecked, we assert that:
+    //  • it's not checked,
+    //  • but it *is* indeterminate
+    expect(bInput.checked).toBe(false);
+    expect(bInput.indeterminate).toBe(true);
+
+    // BA stays checked
+    expect(ba).toBeChecked();
+
+    // BB itself is now unchecked
+    expect(bb).not.toBeChecked();
+
+    // its children (BBA, BBB, BBC) are all unchecked
+    expect(bba).not.toBeChecked();
+    expect(bbb).not.toBeChecked();
+    expect(bbc).not.toBeChecked();
+
+    // BC (sibling-child of B) remains checked
+    expect(bc).toBeChecked();
+
+    expect(c).not.toBeChecked();
+
+
+    await userEvent.click(caa);
+    expect(c).not.toBeChecked();
+    expect(ca).not.toBeChecked();
+    expect(caa).toBeChecked();
+    expect(cab).not.toBeChecked();
+    expect(cac).not.toBeChecked();
+  });
+
+  // Uses SIBLINGS
+  it("with bridgeParent=true still treats siblings independently", async () => {
+    render(<Siblings bridgeParent={true} />);
+
+    const [a, b, c] = ["item A", "item B", "item C"].map(name =>
+      screen.getByRole("checkbox", { name }) as HTMLInputElement
+    );
+
+    // click C → only C becomes checked
+    await userEvent.click(c);
+    expect(a).not.toBeChecked();
+    expect(b).not.toBeChecked();
+    expect(c).toBeChecked();
+
+    // click B → C remains checked, B toggles on, A stays off
+    await userEvent.click(b);
+    expect(a).not.toBeChecked();
+    expect(b).toBeChecked();
+    expect(c).toBeChecked();
+
+    // click B again → B toggles off, C stays on
+    await userEvent.click(b);
+    expect(a).not.toBeChecked();
+    expect(b).not.toBeChecked();
+    expect(c).toBeChecked();
+
+  });
+});