@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Button.spec.tsx

@@ -0,0 +1,241 @@
+import React, { createRef } from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button, ButtonProps } from "./Button";
+import { axe } from "vitest-axe";
+
+describe("Button Component", () => {
+  it("renders the button with default styles", () => {
+    render(<Button>Default Button</Button>);
+    const button = screen.getByRole("button", { name: "Default Button" });
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass("inline-flex items-center justify-center whitespace-nowrap");
+  });
+
+  it("applies custom classes and merges with default classes", () => {
+    render(<Button className="custom-class">Custom Class Button</Button>);
+    const button = screen.getByRole("button", { name: "Custom Class Button" });
+
+    expect(button).toHaveClass("custom-class");
+    expect(button).toHaveClass("inline-flex items-center justify-center whitespace-nowrap");
+  });
+
+  /*it("applies variant-specific styles", () => {
+    render(<Button variant="Outline">Outline Button</Button>);
+    const button = screen.getByRole("button", { name: "Outline Button" });
+
+    expect(button).toHaveClass("border-dha-mc-true-blue bg-white border-2 text-dha-mc-true-blue");
+  });*/
+
+  it("uses label prop if children are not provided", () => {
+    render(<Button label="Label Button" />);
+    const button = screen.getByRole("button", { name: "Label Button" });
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent("Label Button");
+  });
+
+  it("prioritizes children over label prop", () => {
+    render(
+      <Button label="Label Button">Children Button</Button>
+    );
+    const button = screen.getByRole("button", { name: "Children Button" });
+
+    expect(button).toHaveTextContent("Children Button");
+    expect(button).not.toHaveTextContent("Label Button");
+  });
+
+  it("handles the onClick event", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Clickable Button</Button>);
+    const button = screen.getByRole("button", { name: "Clickable Button" });
+
+    fireEvent.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("sets the correct button type", () => {
+    render(<Button type="submit">Submit Button</Button>);
+    const button = screen.getByRole("button", { name: "Submit Button" });
+
+    expect(button).toHaveAttribute("type", "submit");
+  });
+
+  it("should forward the ref to the button element", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Button with Ref</Button>);
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(ref.current?.textContent).toBe("Button with Ref");
+  });
+
+  it("renders a disabled button with appropriate styles", () => {
+    render(
+      <Button variant="filled" disabled>
+        Disabled Button
+      </Button>
+    );
+    const button = screen.getByRole("button", { name: "Disabled Button" });
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass("disabled:border-[#e4e4e5]");
+  });
+
+  /*
+  it("falls back to the default variant if an unknown variant is provided", () => {
+    render(
+      <Button variant="unknown-variant">
+        Fallback Variant Button
+      </Button>
+    );
+    const button = screen.getByRole("button", { name: "Fallback Variant Button" });
+
+    expect(button).toHaveClass("bg-gray-200 hover:bg-blue-400 text-black");
+  });*/
+});
+
+describe('Button Accessibility Tests', () => {
+  const renderComponent = (props: ButtonProps) =>
+    render(<Button {...props} />);
+
+  it('should have no accessibility violations with default variant', async () => {
+    const { container } = renderComponent({ label: 'Click Me' });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations with custom variant', async () => {
+    const { container } = renderComponent({ label: 'Submit', variant: 'filled' });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should support disabled state without accessibility violations', async () => {
+    const { container } = renderComponent({ label: 'Disabled', disabled: true });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should handle custom class merging correctly', async () => {
+    const { container } = renderComponent({
+      label: 'Custom Class',
+      className: 'custom-class bg-red-500 text-white',
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should render a button with accessible name using label', () => {
+    const { getByRole } = renderComponent({ label: 'Accessible Button' });
+    const button = getByRole('button', { name: 'Accessible Button' });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should render children and fallback to label if children are not provided', () => {
+    const { getByText, rerender } = renderComponent({ label: 'Fallback Label' });
+    expect(getByText('Fallback Label')).toBeInTheDocument();
+
+    rerender(<Button>Child Content</Button>);
+    expect(getByText('Child Content')).toBeInTheDocument();
+  });
+
+  it('should handle ARIA attributes for assistive technologies', () => {
+    const { getByRole } = renderComponent({
+      label: 'Button with ARIA',
+      'aria-label': 'Custom ARIA Label',
+    });
+    const button = getByRole('button', { name: 'Custom ARIA Label' });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should render a submit button with proper type', () => {
+    const { getByRole } = renderComponent({ type: 'submit', label: 'Submit Button' });
+    const button = getByRole('button', { name: 'Submit Button' });
+    expect(button).toHaveAttribute('type', 'submit');
+  });
+
+  it('should handle click events', () => {
+    const handleClick = vi.fn();
+    const { getByRole } = renderComponent({ label: 'Click Me', onClick: handleClick });
+    const button = getByRole('button', { name: 'Click Me' });
+    button.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render with custom styles for hover and active states', async () => {
+    const { container } = renderComponent({
+      label: 'Hover Button',
+      className: 'hover:bg-blue-500 active:bg-blue-700',
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe("Button Icon and Selected Prop Tests", () => {
+  it("applies default variant's selected style when selected is true and no classNameSelected is provided", () => {
+    render(<Button label="Selected Button" selected variant="default" />);
+    const button = screen.getByRole("button", { name: /Selected Button/ });
+    expect(button.className).toContain("bg-gray-500");
+    expect(button.className).toContain("text-white");
+  });
+
+  it("applies custom classNameSelected when selected is true", () => {
+    render(
+      <Button
+        label="Custom Selected Button"
+        selected
+        classNameSelected="selected-custom"
+        variant="default"
+      />
+    );
+    const button = screen.getByRole("button", { name: /Custom Selected Button/ });
+    expect(button.className).toContain("selected-custom");
+  });
+
+  it("renders a left icon when iconPosition is 'left'", () => {
+    render(
+      <Button
+        label="Left Icon Button"
+        icon={<span data-testid="left-icon">Icon</span>}
+        iconPosition="left"
+      />
+    );
+    const button = screen.getByRole("button", { name: /Left Icon Button/ });
+    const leftIcon = screen.getByTestId("left-icon");
+    expect(leftIcon).toBeInTheDocument();
+    // Check that the icon is wrapped in a span with the proper class.
+    expect(leftIcon.parentElement).toHaveClass("icon-left");
+  });
+
+  it("renders icon only when iconPosition is 'iconOnly'", () => {
+    render(
+      <Button
+        icon={<span data-testid="icon-only">IconOnly</span>}
+        iconPosition="iconOnly"
+      />
+    );
+    const button = screen.getByRole("button");
+    const iconOnlySpan = screen.getByTestId("icon-only");
+    expect(iconOnlySpan).toBeInTheDocument();
+    expect(iconOnlySpan.parentElement).toHaveClass("size-6");
+    expect(button.querySelector(".button-text")).toBeNull();
+    expect(button.className).toMatch(/px-\[12px\]/);
+    expect(button.className).toMatch(/py-\[12px\]/);
+  });
+
+  it("renders a right icon when iconPosition is 'right'", () => {
+    render(
+      <Button
+        label="Right Icon Button"
+        icon={<span data-testid="right-icon">Icon</span>}
+        iconPosition="right"
+      />
+    );
+    const button = screen.getByRole("button", { name: /Right Icon Button/ });
+    const rightIcon = screen.getByTestId("right-icon");
+    expect(rightIcon).toBeInTheDocument();
+    expect(rightIcon.parentElement).toHaveClass("icon-right");
+  });
+});

package/src/lib/Button.tsx

@@ -0,0 +1,121 @@
+import { ButtonHTMLAttributes, forwardRef, ReactNode, useEffect, useState } from "react";
+import { twMerge } from 'tailwind-merge';
+
+interface VariantType {
+  [key: string]: {normal: string, selected: string};
+}
+
+const baseClasses = 'inline-flex items-center justify-center whitespace-nowrap rounded-md  ' +
+  'ring-offset-background transition-colors focus-visible:outline-hidden font-["Arial"] ' +
+  'disabled:pointer-events-none text-sm md:text-base lg:text-lg ' +
+  'disabled:opacity-50 px-6 py-[8px] md:py-[12px] lg:py-[16px] h-[40px] md:h-[48px] lg:h-[56px] ';
+
+const variants: VariantType = {
+  default: {
+    normal: 'border-2 border-gray-300 rounded-md bg-gray-200 hover:bg-slate-400 text-black text-sm md:text-base lg:text-lg hover:text-black ' +
+      'hover:border-slate-600 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive ' +
+      'focus:border-black ' +
+      'disabled:border-dha-mc-bottom-nav-background disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1',
+    selected: 'bg-gray-500 text-white', // Only used if 'selected' is true to indicate state when 'selected'
+  } ,
+  filled: {
+    normal: 'rounded-md bg-[#092068] hover:bg-[#0c2c8e] text-white text-sm md:text-base lg:text-lg hover:text-white ' +
+      'focus:shadow-[0px_0px_0px_3px_rgba(238,131,255,1.00)] active:bg-[#0F37B3] disabled:bg-[#e4e4e5] disabled:text-[#939194] ' +
+      'disabled:border-[#e4e4e5] ',
+    selected: '', // Only used if 'selected' is true
+  },
+  outline: {
+    normal: 'rounded-md border-[#092068] bg-white border-2 text-[#092068] text-sm md:text-base lg:text-lg disabled:border-dha-mc-secondary-border ' +
+      'disabled:text-[#939194] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] ' +
+      'focus:shadow-[0px_0px_0px_3px_rgba(238,131,255,1.00)] ',
+    selected: '', // Only used if 'selected' is true
+  },
+  transparent: {
+    normal: 'rounded-md text-sm md:text-base lg:text-lg text-[#092068] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] ' +
+    'disabled:text-[#939194]',
+    selected: '', // Only used if 'selected' is true
+  }
+};
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>  {
+  children?: ReactNode;
+  label?: string;
+  onClick?: () => void;
+  className?: string;
+  classNameGroup?: string; // not documented on local component - used by ButtonGroup
+  icon?: ReactNode | undefined; // Accepts any valid React element (e.g., image, icon component)
+  iconPosition?: "left" | "right" | "iconOnly" | undefined;
+  variant?: string; // Define allowed variants here, extend as necessary.
+  type?: "button" | "submit" | "reset";
+  selected?: boolean;
+  classNameSelected?: string;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ label, onClick, className, icon, iconPosition, variant = "default",
+    type = "button", children, selected = false, classNameSelected,
+    classNameGroup = '', ...props }, ref) => {
+
+  const [mergedClasses, setMergedClasses] = useState('');
+  // console.log('iconPosition: ', iconPosition);
+
+  // useEffect(() => {
+  //   const variantClasses = variants[variant] || variants.default;
+  //   setMergedClasses(twMerge(baseClasses, variantClasses, className));
+  // }, [className, variant]);
+
+  useEffect(() => {
+    let variantClasses = variants[variant].normal || variants.default.normal;
+
+    if (selected && !classNameSelected) {
+      variantClasses = twMerge(variantClasses, variants[variant].selected);
+    } else if (selected && classNameSelected) {
+      variantClasses = twMerge(variantClasses, classNameSelected);
+    }
+
+    setMergedClasses(twMerge(baseClasses, variantClasses))
+
+  }, [selected, classNameSelected, variant]);
+
+  // Button contains default classes, classNameGroup, and className
+  // we assign classes from ButtonGroup to classNameGroup
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className={`${iconPosition === "iconOnly" ?
+        (twMerge(
+          mergedClasses,
+          `px-[12px] md:px-[14px] lg:px-[16px] py-[8px] md:py-[12px] lg:py-[16px]`,
+          classNameGroup, // passed in from ButtonGroup if present
+          className       // dev over-rides
+        ))
+        : twMerge(mergedClasses, classNameGroup, className)}`}
+      ref={ref}
+      {...props}
+    >
+      {/* Conditionally render icon on the left or right based on iconPosition */}
+      {/* ms/e-3 === 12px */}
+      {iconPosition === "left" && icon && (
+        <span className="icon-left mr-3 size-6">{icon}</span>
+      )}
+      {
+        iconPosition === "iconOnly" && icon ?
+        (
+          <span className="size-6">{icon}</span>
+        )
+        :
+        (
+          <span className=''>{children ? children : label}</span>
+        )
+      }
+      {iconPosition === "right" && icon && (
+        <span className="icon-right ml-3 size-6">{icon}</span>
+      )}
+    </button>
+  );
+});
+
+// Chris suggested for debug component name labeling
+Button.displayName = 'SDK Button'

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

@@ -0,0 +1,129 @@
+import { Meta, StoryContext, StoryFn } from '@storybook/react';
+import { Button, ButtonProps } from './Button';
+import { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
+import { useState } from 'react';
+import { within, expect, waitFor } from 'storybook/test';
+
+// Meta object - defines basic storybook options for this story
+export default {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'filled', 'outline', 'transparent']
+      },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'icon'],
+      },
+    },
+  args: {
+    disabled: false,    // set default argument values
+    // label: 'Button', // set default argument values
+  },
+  parameters: {
+    layout: 'centered', // options are 'centered', 'fullscreen', and 'padded' (default value)
+    backgrounds: { 
+      default: 'white',
+      values: [
+        { name: 'white', value: '#ffffff' },
+        { name: 'medium', value: '#b5bbb7' },
+        { name: 'dark', value: '#000' },
+      ],
+    },
+  },
+} as Meta<ButtonProps>;
+
+
+
+export const DefaultOne: StoryFn = () => {
+  
+  return (
+      <ButtonGroup>
+        <Button variant='filled'>Primary</Button>
+      </ButtonGroup>
+  );
+};
+
+
+export const DefaultTwo: StoryFn = () => {
+  
+  return (
+      <ButtonGroup>
+        <Button variant='outline'>Secondary</Button>
+        <Button variant='filled'>Primary</Button>
+      </ButtonGroup>
+  );
+};
+
+export const DefaultThree: StoryFn = () => {
+  
+  return (
+      <ButtonGroup>
+        <Button variant='outline'>Secondary</Button>
+        <Button variant='filled'>Primary</Button>
+        <Button variant='transparent'>Tertiary</Button>
+      </ButtonGroup>
+  );
+};
+
+
+export const ColumnOne: StoryFn = () => {
+  
+  return (
+      <ButtonGroup variant='column'>
+        <Button variant='filled'>Primary</Button>
+      </ButtonGroup>
+  );
+};
+
+export const ColumnTwo: StoryFn = () => {
+  
+  return (
+      <ButtonGroup variant='column'>
+        <Button variant='outline'>Secondary</Button>
+        <Button variant='filled'>Primary</Button>
+      </ButtonGroup>
+  );
+};
+
+export const ColumnThree: StoryFn = () => {
+  
+  return (
+      <ButtonGroup variant='column'>
+        <Button variant='outline'>Secondary</Button>
+        <Button variant='filled'>Primary</Button>
+        <Button variant='transparent'>Tertiary</Button>
+      </ButtonGroup>
+  );
+};
+
+
+export const CustomThree: StoryFn = () => {
+  
+  return (
+    <div className="">
+      <ButtonGroup variant='custom' 
+          className='flex flex-row gap-4'
+          classNameButtons='size-14 border-4 bg-blue-200 border-purple-500'
+          >
+
+        <Button className='border-red-500 border-4 bg-white hover:bg-slate-200 hover:text-black'>A</Button>
+        <Button>B</Button>
+        <Button>C</Button>
+      </ButtonGroup>
+    </div>
+  );
+};
+
+
+
+// // Define "Alternate Classes" story
+// export const AlternateClasses = {
+//   args: {
+//     children: 'Custom Classes',
+//     onClick: () => console.log('Clicked!'),
+//     className: 'border-8 border-black text-white bg-orange-500',
+//   }
+// };

package/src/lib/ButtonGroup.spec.tsx

@@ -0,0 +1,89 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { axe } from "vitest-axe";
+import { ButtonGroup, ButtonGroupProps } from './ButtonGroup'; 
+import { Button, ButtonProps } from './Button';
+import { cp } from 'fs';
+import { createRef } from 'react';
+
+// getByText is synchronous
+// findByText is asynchronous
+
+describe('ButtonGroup Component', () => {
+  // Helper function to render the component with children
+  const renderComponent = (props: Partial<ButtonGroupProps> = {}) =>
+    render(
+      <ButtonGroup {...props}>
+        <Button>A</Button>
+        <Button>B</Button>
+        <Button>C</Button>
+      </ButtonGroup>
+    );
+
+  test('renders all children buttons', () => {
+    renderComponent();
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+    expect(screen.getByText('C')).toBeInTheDocument();
+  });
+
+  
+  test('applies custom className to the container', () => {
+    const customContainerClass = 'custom-container';
+    const { container } = render(
+      <ButtonGroup className={customContainerClass}>
+        <Button>A</Button>
+      </ButtonGroup>
+    );
+    expect(container.firstChild).toHaveClass(customContainerClass);
+  });
+
+  test('merges classNameButtons with each Button child', () => {
+    const groupButtonClass = 'group-spacing';
+    const customButtonClass = 'btn-custom';
+    const { container } = render(
+      <ButtonGroup classNameButtons={groupButtonClass}>
+        <Button classNameGroup={customButtonClass}>A</Button>
+        <Button>B</Button>
+      </ButtonGroup>
+    );
+    // Query all button elements (assumes Button renders a <button>)
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+
+    // For the first button, verify that both the custom button class and group class are merged
+    expect(buttons[0].className).toContain(customButtonClass);
+    expect(buttons[0].className).toContain(groupButtonClass);
+    // For the second button, the group class should be present
+    expect(buttons[1].className).toContain(groupButtonClass);
+  });
+
+  test('has no accessibility violations', async () => {
+    const { container } = renderComponent();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test('forwards ref to the root element', () => {
+    const ref = createRef<HTMLDivElement>();
+    const { container } = render(
+      <ButtonGroup ref={ref}>
+        <Button>A</Button>
+      </ButtonGroup>
+    );
+    // The ref should be attached to the container (i.e. the first DOM element rendered)
+    expect(ref.current).toBe(container.firstChild);
+  });
+
+  test('renders non-element children without modification', () => {
+    const plainText = 'Plain Text';
+    const { container } = render(
+      <ButtonGroup>
+        {plainText}
+        <Button>A</Button>
+      </ButtonGroup>
+    );
+    expect(container.textContent).toContain(plainText);
+  });
+  
+});

package/src/lib/ButtonGroup.tsx

@@ -0,0 +1,107 @@
+
+/*
+ * Default is horizontal ('default'), optional is 'column'. 
+ * 
+ * Possible to have 1, 2, or 3 buttons in the predefined layout
+ * 
+ * If the user chooses a 'custom' variant, we will forego the hard formatting on
+ * the buttons, i.e. 1st is secondary, 2nd is primary, etc.
+ * 
+ * Scenarios for each of the two initial layouts, single, two, and three button
+ * versions of those layouts. 
+ * 
+ * In the three-button layout, the 'Tertiary' transparent
+ * button always appears below the first two, regardless of layout variant.
+ * 
+ * I think we inform the developer, and give them example usage, that the primary
+ * button is filled, the secondary is outline, and the tertiary is transparent.
+ * 
+ * Default layout:
+ * flex-row (1st two buttons)
+ * flex-row (3rd button)
+ * 
+ * Columm Layout:
+ * flex row ( flex column --> two buttons)
+ * flex row (3rd button)
+ * 
+*/
+
+import { ButtonHTMLAttributes, Children, cloneElement, forwardRef, isValidElement, ReactElement, ReactNode, useEffect, useState } from "react";
+import { twMerge } from 'tailwind-merge';
+import { ButtonProps } from './Button';
+
+interface VariantType {
+  [key: string]: {container: string, button: string,};
+}
+
+// const baseClasses = ' ';
+
+const variants: VariantType = {
+  default: {
+    container: 'flex gap-4 w-full md:gap-8 lg:gap-12',
+    button: 'w-[150px]',
+  } ,
+  column: {
+    container: 'flex flex-col gap-3 w-full md:gap-4 lg:gap-6',
+    button: 'w-[150px]',
+  },
+  custom: {
+    container: '',
+    button: '',
+  }
+};
+
+export interface ButtonGroupProps extends ButtonHTMLAttributes<HTMLButtonElement>  {
+  children?: ReactNode;     // children (buttons) that comprise the ButtonGroup
+  className?: string;       // classname to alter div that contains the ButtonGroup
+  classNameButtons?: string;  // classnames to alter boundary / spacing between buttons
+  variant?: string;
+}
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, children, classNameButtons, variant = 'default', ...props }, ref) => {
+    let size = 0;
+    
+    const buttons = Children.map(children, (child) => {
+      if (isValidElement(child)) {
+        ++size;
+        // Merge the existing className on the child with the classNameEdges prop
+        const element = child as ReactElement<ButtonProps>;
+        const childClassName = element.props.classNameGroup || "";
+        return cloneElement(element, {
+          classNameGroup: twMerge(childClassName, variants[variant].button, classNameButtons),
+        });
+      }
+      return child;
+    });
+
+    const tertiary:boolean = (size === 3) && (variant === 'default') ? true : false;
+    const one = buttons?.slice(0,2);
+    const two = buttons?.slice(2);
+
+    // three buttons & !custom, return tertiary on bottom row
+    if (tertiary)
+      return (
+        <div className='inline-flex flex-col gap-1'>
+        <div className={twMerge(variants[variant].container, className)}>
+            {one}
+        </div>
+        <div className={twMerge(variants[variant].container, 'justify-center', className)}>
+            {two}
+        </div>
+        </div>
+      );
+
+    else 
+
+      return (
+        <div className={twMerge("", variants[variant].container, className)} ref={ref}>
+          {buttons}
+        </div>
+      );
+    
+  }
+);
+
+// Chris suggested for debug component name labeling
+ButtonGroup.displayName = 'SDK ButtonGroup'