@dhasdk/simple-ui 1.0.7 → 1.0.8

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

@@ -0,0 +1,157 @@
+import { Meta } from '@storybook/react';
+import { List, ListProps, ListItem } from './List';
+import { FC } from 'react';
+import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowUp, ArrowUpRight, ArrowUpLeft } from 'lucide-react';
+
+// Meta object - defines basic storybook options for this story
+export default {
+  title: 'Components/List',
+  component: List,
+  argTypes: {
+    },
+  parameters: {
+    layout: 'centered', // options are 'centered', 'fullscreen', and 'padded' (default value)
+    backgrounds: { default: 'light' }, // options are light, medium, or dark
+  },
+} as Meta<ListProps>;
+
+// Define "Default" story
+export const Default = {
+  args: {
+    size: 'default',
+    items:[{
+      children: 'asdf',
+    }, {
+      children: 'asdf2'
+    }, {
+      children: 'asdf3'
+    }, {
+      children: 'asdf4'
+    }, {
+      children: 'asdf5'
+    }]
+  }
+};
+
+export const IconList = {
+  args: {
+    size: 'default',
+    items: [{
+      children:
+        <>
+          <p className='inline'>1</p>
+          <ArrowUp className='inline pb-1'/>
+        </>
+    }, {
+      children:
+        <>
+          <p className='inline'>2</p>
+          <ArrowUpRight className='inline pb-1'/>
+        </>
+    }, {
+      children:
+        <>
+          <p className='inline'>3</p>
+          <ArrowDownRight className='inline pb-1'/>
+        </>
+    }, {
+      children:
+        <>
+          <p className='inline'>4</p>
+          <ArrowDown className='inline pb-1'/>
+        </>
+    }, {
+      children:
+        <>
+          <p className='inline'>5</p>
+          <ArrowDownLeft className='inline pb-1'/>
+        </>
+    }, {
+      children:
+        <>
+          <p className='inline'>6</p>
+          <ArrowUpLeft className='inline pb-1'/>
+        </>
+    }, {
+      children:
+      <>
+        <img src='src/assets/img/hospital.jpg' alt='hospital' className='max-h-[2em] max-w-[2em] pr-1 inline pb-1'></img>
+        <p className='inline'>big image --resized</p>
+      </>
+    }
+    , {
+      children:
+      <>
+        <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline pb-2'></img>
+        <p className='inline'>icon</p>
+      </>
+    }]
+  }
+}
+
+//Controls won't work on this story because the ListItems are built at runtime
+// the list items are specified directly in the story below instead of in the component file via an array, similar to first 2 stories
+export const FullComponentArray: FC = () => {
+  const listItems = [
+    {
+      children:
+        <>
+          <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-2 inline'></img>
+          <p className='inline'>icon</p>
+        </>
+    },
+    {
+      children:
+        <>
+          <img src='src/assets/img/heartbeat.svg' alt='heartbeat' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'></img>
+          <p className='inline'>icon</p>
+        </>
+    },
+    {
+      children:
+        <>
+          <img src='src/assets/img/pill.svg' alt='pill' className='max-h-[2em] max-w-[2em] pr-1 pb-2 inline'></img>
+          <p className='inline'>icon</p>
+        </>
+    },
+    {
+      children:
+        <>
+          <img src='src/assets/img/prescription.svg' alt='prescription' className='max-h-[2em] max-w-[2em] pr-1 pb-2 inline'></img>
+          <p className='inline'>icon</p>
+        </>
+    },
+  ]
+  return (
+    <div>
+      <p>This is an example header (user implemented)</p>
+      <List items={listItems} isDecimal={true} withDividers={true}>
+      </List>
+    </div>
+  )
+}
+
+//Controls won't work on this story because the ListItems are built at runtime
+// the list items are specified directly in the story below instead of in the component file via an array, similar to first 2 stories
+export const FullComponentChildren: FC = () => {
+  return (
+      <List isDecimal={true} withDividers={true} classNameDividerColor='red-400'>
+        <ListItem>
+          <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+          <p className='inline'>icon</p>
+        </ListItem>
+        <ListItem>
+          <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+          <p className='inline'>icon</p>
+        </ListItem>
+        <ListItem>
+          <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+          <p className='inline'>icon</p>
+        </ListItem>
+        <ListItem>
+          <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+          <p className='inline'>icon</p>
+        </ListItem>
+      </List>
+  )
+}

package/src/lib/List.spec.tsx

@@ -0,0 +1,211 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { axe } from "vitest-axe";
+import { describe, it, expect, vi } from "vitest";  // required for ".toHaveNoViolations"
+import { List, ListItem, ListItemProps } from './List';
+
+describe('List Component', () => {
+  // it('renders an empty list without crashing', () => {
+  //   render(<List />);
+  //   const list = screen.getByRole('list');
+  //   expect(list).toBeInTheDocument();
+  //   expect(list.children).toHaveLength(0);
+  // });
+
+
+  // describe('isRomanNumeral prop', () => {
+    it('renders roman numeral labels for list items when isRomanNumeral is true', () => {
+      const items = [
+        { children: 'Item One' },
+        { children: 'Item Two' },
+        { children: 'Item Three' },
+      ];
+
+      render(<List items={items} isRomanNumeral />);
+
+      // For the items mapping, the roman numeral is generated by:
+      // String.fromCharCode(8560 + index) followed by a dot and a space.
+      // For index 0, it should be "ⅰ. ", for index 1 "ⅱ. ", etc.
+      expect(screen.getByText('ⅰ.')).toBeInTheDocument();
+      expect(screen.getByText('ⅱ.')).toBeInTheDocument();
+      expect(screen.getByText('ⅲ.')).toBeInTheDocument();
+    });
+  // });
+
+  it("covers the React.Children.map(...) roman-numeral branch", () => {
+    render(
+      <List isRomanNumeral>
+        <ListItem>Alpha</ListItem>
+        <ListItem>Bravo</ListItem>
+      </List>
+    );
+
+    // now the children-mapping branch fires
+    expect(screen.getByText("ⅰ.")).toBeInTheDocument();    // for <span className='w-6'>
+    expect(screen.getByText("Alpha")).toBeInTheDocument(); // still renders the child
+  });
+
+  // describe('isAlphabetical prop', () => {
+  it('renders alphabetical labels for list items when isAlphabetical is true', () => {
+    const items = [
+      { children: 'First Item' },
+      { children: 'Second Item' },
+      { children: 'Third Item' },
+    ];
+
+    render(<List isInline withDividers classNameItem='border-b' classNameDividerColor='red-500' items={items} isAlphabetical />);
+
+    // In the items mapping, the alphabetical label uses uppercase letters:
+    // String.fromCharCode(65 + index) followed by a dot and a space.
+    expect(screen.getByText('a.')).toBeInTheDocument();
+    expect(screen.getByText('b.')).toBeInTheDocument();
+    expect(screen.getByText('c.')).toBeInTheDocument();
+  });
+
+  it('renders alphabetical labels for children elements when isAlphabetical is true', () => {
+    render(
+      <List isInline withDividers classNameItem='border-b' classNameDividerColor='red-500' isAlphabetical>
+        <ListItem>First Child</ListItem>
+        <ListItem>Second Child</ListItem>
+        <ListItem>Third Child</ListItem>
+      </List>
+    );
+
+    // In the children mapping, the alphabetical label uses lowercase letters:
+    // String.fromCharCode(97 + index) followed by a dot and a space.
+    expect(screen.getByText('a.')).toBeInTheDocument();
+    expect(screen.getByText('b.')).toBeInTheDocument();
+    expect(screen.getByText('c.')).toBeInTheDocument();
+  });
+
+  it('renders list items passed as `items` prop', () => {
+    const items = [
+      { children: 'Item 1' },
+      { children: 'Item 2' },
+      { children: 'Item 3' },
+    ];
+    render(<List items={items} />);
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(items.length);
+    expect(listItems[0]).toHaveTextContent('Item 1');
+    expect(listItems[1]).toHaveTextContent('Item 2');
+    expect(listItems[2]).toHaveTextContent('Item 3');
+  });
+
+  it('renders child nodes passed as children', () => {
+    render(
+      <List>
+        <ListItem>Child 1</ListItem>
+        <ListItem>Child 2</ListItem>
+      </List>
+    );
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Child 1');
+    expect(listItems[1]).toHaveTextContent('Child 2');
+  });
+
+  it('applies custom class names to the list', () => {
+    render(<List className="custom-class" />);
+    const list = screen.getByRole('list');
+    expect(list).toHaveClass('custom-class');
+  });
+
+  it('renders with dividers between items when `withDividers` is true', () => {
+    const items = [
+      { children: 'Item 1' },
+      { children: 'Item 2' },
+    ];
+    render(<List items={items} withDividers classNameDividerColor="border-red-500" />);
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems[0]).toHaveClass('border-b', 'border-red-500');
+    expect(listItems[1]).not.toHaveClass('border-b');
+  });
+
+  it('uses `list-decimal` class when `isDecimal` is true', () => {
+    render(<List isDecimal />);
+    const list = screen.getByRole('list');
+    expect(list).toHaveClass('list-decimal');
+  });
+
+  it('uses `list-disc` class when `isDisc` is true', () => {
+    render(<List isDisc />);
+    const list = screen.getByRole('list');
+    expect(list).toHaveClass('list-disc');
+  });
+
+//   it('renders list items with custom class names from `classNameItem`', () => {
+//     const items = [
+//       { children: 'Item 1', className: 'custom-item-class' },
+//     ];
+//     render(<List items={items} />);
+//     const listItem = screen.getByText('Item 1');
+//     expect(listItem).toHaveClass('custom-item-class');
+//   });
+
+it('renders non-React element children without modification', () => {
+    render(
+      <List>
+        Text Child
+        <ListItem>React Child 1</ListItem>
+        <ListItem>React Child 2</ListItem>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+
+    // Check the first child (non-React element)
+    expect(listItems[0]).toHaveTextContent('React Child 1');
+
+    // Check the second child (React element)
+    expect(listItems[1]).toHaveTextContent('React Child 2');
+  });
+
+});
+
+  it('does not apply a divider to the last item when withDividers is true', () => {
+    render(
+      <List withDividers classNameDividerColor="border-red-500">
+        <ListItem>Item 1</ListItem>
+        <ListItem>Item 2</ListItem>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+
+    // First item should have a divider
+    expect(listItems[0]).toHaveClass('border-b', 'border-red-500');
+
+    // Last item should NOT have a divider
+    expect(listItems[1]).not.toHaveClass('border-b');
+  });
+
+
+describe('List Component Accessibility', () => {
+
+  it('should render list with proper role and structure', () => {
+    render(<List items={[{ children: 'Item 1' }, { children: 'Item 2' }]} />);
+    const list = screen.getByRole('list');
+    const listItems = screen.getAllByRole('listitem');
+
+    expect(list).toBeInTheDocument();
+    expect(listItems).toHaveLength(2);
+  });
+
+  it('should apply proper ARIA attributes for accessibility', () => {
+    render(
+      <List>
+        <ListItem>Accessible Item 1</ListItem>
+        <ListItem>Accessible Item 2</ListItem>
+      </List>
+    );
+    const list = screen.getByRole('list');
+    const listItems = screen.getAllByRole('listitem');
+
+    expect(list).toBeInTheDocument();
+    expect(listItems).toHaveLength(2);
+  });
+
+});

package/src/lib/List.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import {twMerge } from 'tailwind-merge';
+
+export interface ListItemProps  {
+  className?: string,
+  children: React.ReactNode,
+  target?: string,
+}
+
+export interface ListProps {
+  items?: ListItemProps[],
+  header?: string,
+  children?: React.ReactNode,
+  className?: string,
+  withDividers?: boolean,
+  classNameDividerColor?: string,
+  classNameItem?: string,
+  isDecimal?: boolean,
+  isDisc?: boolean,
+  isAlphabetical?: boolean,
+  isRomanNumeral?: boolean,
+  isInline?: boolean,
+}
+
+export const List = ({
+  items,
+  header,
+  className = '',
+  classNameItem = '',
+  children,
+  withDividers = false,
+  classNameDividerColor = '',
+  isDecimal = false,
+  isDisc = false,
+  isAlphabetical = false,
+  isRomanNumeral  = false,
+  isInline = false,
+}: ListProps) => {
+  return (
+    <div className='p-0 m-0'>
+      <p>{header}</p>
+      <ul className={twMerge(`pl-6 list-none w-full`, isDecimal ? 'list-decimal' : '', isDisc ? 'list-disc' : '', className)}>
+        {items && items.map((item, index) => (
+          <ListItem
+            key={index}
+            className={twMerge(`w-full text-base md:text:lg py-2`, withDividers && (isInline ? index !== items.length : index !== items.length - 1) ? 'border-b' : '',
+              classNameDividerColor!== '' && (isInline ? index !== items.length : index !== items.length - 1) ? classNameDividerColor : '',
+              isInline && 'inline mr-2', classNameItem )}
+          >
+            {isRomanNumeral && <span className='flex flex-col w-6'>{String.fromCharCode(8560 + index)}. </span>}
+            {isAlphabetical && <span>{String.fromCharCode(97 + index)}. </span>}
+            {isRomanNumeral ? <span className='flex flex-col w-6'>{item.children}</span> : item.children}
+          </ListItem>
+        ))}
+        {children &&
+          React.Children.map(children, (child, index) =>
+            React.isValidElement<ListItemProps>(child) ?
+              React.cloneElement(child, {
+                className: twMerge(
+                  isInline && 'inline mr-2',
+                  classNameItem,
+                  child.props.className,
+                  `w-full`,
+                  withDividers && (isInline ? index !== React.Children.count(children) : index !== React.Children.count(children) - 1) ? 'border-b' : '',
+                  classNameDividerColor!== '' && (isInline ? index !== React.Children.count(children) : index !== React.Children.count(children) - 1) ? classNameDividerColor : '',
+                ),
+                children: (
+                  <>
+                    {isRomanNumeral &&
+                      <div className='flex flex-row'>
+                        <span className='w-6'>{String.fromCharCode(8560 + index)}. </span>
+                        {child.props.children}
+                      </div>
+                    }
+                    {isAlphabetical && <span>{String.fromCharCode(97 + index)}. </span>}
+                    {!isRomanNumeral && child.props.children}
+                  </>
+                )
+              })
+            : child
+          )}
+      </ul>
+    </div>
+  );
+};
+
+export const ListItem = ({ className, children}: ListItemProps)  =>  {
+  return (
+    <li className={twMerge('py-2 text-base md:text:lg', className )}>
+      {children}
+    </li>
+  );
+};