@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/SkipLink.tsx

@@ -0,0 +1,48 @@
+import { cloneElement, HTMLAttributes, ReactElement, useEffect } from 'react';
+
+/**
+ * The props for the {@link SkipLink} component
+ * @property className - The class name for the SkipLink component, defaults to 'skip-link'
+ * @property children - The child element of the SkipLink component
+ * @property skipTo - The css query aiding the selection of the container (main, section etc) we want to scroll to;
+ */
+export interface SkipLinkProps {
+  className?: string;
+  skipTo: string;  
+  children: ReactElement<HTMLAttributes<HTMLElement>>
+}
+
+/**
+ * A Skiplink component that allows keyboard users to skip to the main content of the page.
+ * See {@link SkipLinkProps} for more information.
+ */
+export const SkipLink = ({ className, children, skipTo }: SkipLinkProps) => {
+  let timerId: NodeJS.Timeout | null = null;
+
+  const onClick = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+
+    const container: HTMLElement | null = document.querySelector(skipTo);
+
+    if (container) {
+      container.tabIndex = -1;
+      container.focus();
+      timerId = setTimeout(() => container.removeAttribute('tabindex'), 1000);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timerId) {
+        clearTimeout(timerId);
+      }
+    };
+  }, [timerId]);
+
+  return cloneElement(children, { onClick, className: className });
+};
+
+SkipLink.defaultProps = {
+  className: 'skip-link',
+  skipTo: 'main:first-of-type',
+};

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

@@ -0,0 +1,108 @@
+import { Meta, StoryContext, StoryFn } from '@storybook/react';
+import { Slider, SliderProps } from './Slider';
+import { useState } from 'react';
+import { within, expect, waitFor } from 'storybook/test';
+
+// Meta object - defines basic storybook options for this story
+export default {
+  title: 'Components/Slider',
+  component: Slider,
+  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: 'padded', // 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<SliderProps>;
+
+
+
+export const Default: StoryFn = () => {
+  
+  return (
+      <Slider />
+  );
+};
+
+
+
+export const ValueCallback: StoryFn = () => {
+  const [value, setValue] = useState<number>();
+  
+  return (
+      <>
+      <Slider startValue={value} changeHandler={setValue} />
+      <div>value: {value}</div>
+      </>
+  );
+};
+
+
+export const SliderLabel: StoryFn = () => {
+  const [value, setValue] = useState<number>();
+  
+  return (
+      <>
+      <Slider 
+        startValue={value} 
+        changeHandler={setValue} 
+        id='1' 
+        label='Volume Level' 
+        classNameLabel='font-bold text-blue-900' 
+        />
+      <div>value: {value}</div>
+      </>
+  );
+};
+
+
+
+export const NonDefaultValues: StoryFn = () => {
+  const [value, setValue] = useState<number>(15);
+  
+  return (
+      <>
+      <Slider 
+        // className='block'
+        startValue={value} 
+        changeHandler={setValue} 
+        id='1' 
+        label='Choose a value from 10 ... 25' 
+        min={10}
+        max={25}
+        classNameLabel='font-bold text-green-900' 
+        />
+      <div>value: {value}</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/Slider.module.css

@@ -0,0 +1,109 @@
+/*
+    -webkit ... chrome, safari, opera, and edge
+    -moz ...... firefox
+
+    Target track w/ these psuedo elements
+    ::-webkit-slider-runnable-track
+    ::-moz-range-track
+
+    Target thumb w/ these psuedo elements
+    ::-webkit-slider-thumb (fix at minimum thumb offset error)
+    ::-moz-range-thumb (fix at minimum defaults for border and border-radius)
+
+    Must also apply focus styles to comply w/ a11y
+
+
+    required properties for track are height & background
+        - border-radius can be used to round out
+*/
+
+/* test class - can remove */
+.testP {
+    color: green;
+    font-weight: bold;
+    border: 1px solid blue;
+}
+
+/* test class */
+.slider {
+    display: block;
+    
+}
+
+/* Will automatically reset browser-defined styles on input-->range */
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    width: 50%;
+    margin-bottom: 6px;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+/* CHROME, SAFARI, and EDGE styles ---------------------- */ 
+/* Note: :focus bug in safari re setting values on thumb - it doesn't */
+
+/* Track  */
+input[type="range"]::-webkit-slider-runnable-track {
+    background: #053a5f;
+    height: 0.5rem;
+    border-radius: 4px;
+}
+
+/* Thumb */
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;  /* similar purpose as usage above */
+    /* to center, apply margin-top=(track height px / 2) - (thumb height px / 2) */
+    /* display: inline; */
+    background-color: lightblue;
+    border: 2px solid lightskyblue;
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 50%;
+    margin-top: -0.4em;     /* centers thumb on track */
+}
+
+/* set focus values  */
+input[type="range"]:focus::-webkit-slider-thumb {
+    border: 1px solid blue;
+    outline: 2px solid blue;
+    outline-offset: 0.1rem;
+}
+
+/* This helps alleviate focus issue w/ Safari */
+input[type="range"]:active::-webkit-slider-thumb {
+    border: 1px solid blue;
+    outline: 2px solid blue;
+    outline-offset: 0.1rem;
+}
+
+
+
+/* FIREFOX styles --------------------------------------- */ 
+
+/* Track */
+input[type="range"]::-moz-range-track {
+    background: #053a5f;
+    height: 0.5rem;
+    border-radius: 4px;
+  }
+
+/* Thumb - requires border and border-radius fixes */
+input[type="range"]::-moz-range-thumb {
+    background-color: lightblue;
+    border: 2px solid lightskyblue; /* border: none to just remove default */
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 50%; /* border-radius: 0 to just remove default */
+}
+
+/* set focus values */
+input[type="range"]:focus::-moz-range-thumb {
+    border: 1px solid blue;
+    outline: 2px solid blue;
+    outline-offset: 0.1rem;
+}

package/src/lib/Slider.spec.tsx

@@ -0,0 +1,67 @@
+import React, { createRef } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { axe } from 'vitest-axe';
+import { Slider } from './Slider';
+
+describe('Slider Component', () => {
+  it('renders an input of type range', () => {
+    render(<Slider />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toBeInTheDocument();
+    expect(slider).toHaveAttribute('type', 'range');
+  });
+
+  it('sets default value to startValue prop', () => {
+    render(<Slider startValue={30} />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveValue('30');
+  });
+
+  it('updates value and calls changeHandler on change', () => {
+    const handleChange = vi.fn();
+    render(<Slider startValue={10} changeHandler={handleChange} />);
+    const slider = screen.getByRole('slider');
+
+    fireEvent.change(slider, { target: { value: '70' } });
+
+    expect(slider).toHaveValue('70');
+    expect(handleChange).toHaveBeenCalledWith(70);
+  });
+
+  it('forwards ref to the input element', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<Slider ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it('merges custom className with default CSS module class', () => {
+    render(<Slider className="custom-slider" />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveClass('custom-slider');
+  });
+
+  it('renders a label when id and label props are provided', () => {
+    render(<Slider id="volume-slider" label="Volume" />);
+    const label = screen.getByText('Volume');
+    const slider = screen.getByRole('slider');
+
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute('for', 'volume-slider');
+    expect(slider).toHaveAttribute('id', 'volume-slider');
+  });
+
+  it('does not render a label when id or label is missing', () => {
+    render(<Slider id="only-id" />);
+    // No <label> element should be present
+    expect(screen.queryByLabelText('only-id')).toBeNull();
+  });
+});
+
+describe('Slider Accessibility Tests', () => {
+  it('has no accessibility violations when labeled', async () => {
+    const { container } = render(<Slider id="a11y-slider" label="Brightness" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/Slider.tsx

@@ -0,0 +1,101 @@
+
+// This utilizes the HTML input type="range" element
+
+// Dev Notes on input>range
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
+// Notes on CSS styling
+// https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/
+//
+// May need an alternate means of showing focus due to safari: https://bugs.webkit.org/show_bug.cgi?id=22261&utm_source=chatgpt.com
+
+/*
+ * Two main parts to a Slider - 1) track, and 2) thumb
+ *
+ * Required to apply baseline styles:
+    input[type="range"] {
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      cursor: pointer;
+      width: 15rem;
+    }
+ *
+ *
+*/
+
+import {  ChangeEvent, forwardRef,  InputHTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { twMerge } from 'tailwind-merge';
+import styles from './Slider.module.css';
+
+interface VariantType {
+  [key: string]: {css: string, labelCss: string};
+}
+
+const variants: VariantType = {
+  default: {
+    css: 'w-full block mb-2',
+    labelCss: 'block mb-2'
+  } ,
+};
+
+
+export interface SliderProps extends InputHTMLAttributes<HTMLInputElement>  {
+  className?: string;       // classname to alter div that contains the ButtonGroup
+  classNameLabel?: string;
+  variant?: string;         // unused currently
+  startValue?: number;      //
+  changeHandler?: (value: number) => void;  // callback function on value change
+  id?: string;
+  label?: string;
+}
+
+/**
+ * id, name, list are common options for slider
+ */
+export const Slider = forwardRef<HTMLInputElement | HTMLLabelElement, SliderProps>(
+  ({ className, classNameLabel, variant = 'default', startValue = 50,
+    changeHandler, id, label, ...props }, ref) => {
+
+    const [value, setValue] = useState<number>(startValue);
+    const localRef = useRef<HTMLInputElement>(null);
+
+    // expose our local ref to parent
+    useImperativeHandle(ref, () => localRef.current as HTMLInputElement);
+
+    // set starting value for slider component
+    useEffect (() => {
+      setValue(startValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const changeFunc = (e: ChangeEvent<HTMLInputElement>) => {
+      const curVal = Number(e.target.value);
+      setValue(Number(curVal));
+      if (changeHandler) {
+        changeHandler(curVal);
+      }
+    };
+
+    return (
+      <>
+        { id && label &&
+          <label htmlFor={id}
+            className={twMerge(variants[variant].labelCss, classNameLabel)}
+            >{label}</label>
+        }
+      <input
+        ref={localRef}
+        type='range'
+        id={id}
+        className={twMerge(styles.slider, className)} // works w/ CSS modules
+        value={value}
+        onChange={changeFunc}
+        {...props}
+        />
+      </>
+    );
+  }
+);
+
+// Chris suggested for debug component name labeling
+Slider.displayName = 'SDK Slider'

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

@@ -0,0 +1,93 @@
+// Badge.stories.tsx
+
+import { Meta} from '@storybook/react';
+import { Status } from './Status';
+
+// Import your images
+import firstAidKit from '../assets/img/first-aid-kit.svg';
+import heartbeat from '../assets/img/heartbeat.svg';
+import pill from '../assets/img/pill.svg';
+import prescription from '../assets/img/prescription.svg';
+import stethoscope from '../assets/img/stethoscope.svg';
+import info from '../assets/img/info_24_ 2c6441.svg';
+import infoBlue from '../assets/img/info_24_ 1d4ed8.svg';
+// https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled
+
+export default {
+  title: 'Components/Status',
+  component: Status,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'icon', 'media']
+      },
+    subVariant: {
+      control: 'select',
+      options: ['default', 'gray', 'red', 'green', 'yellow', 'blue'],
+      }
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+} as Meta<typeof Status>;
+
+// DefaultBadge story
+// export const DefaultStatus = {
+//   args: {
+//     variant: 'default',
+//     subVariant: 'default',
+//     children: 'Badge!',
+//   }
+// };
+
+
+export const Available = {
+  args: {
+    variant: 'available',
+    children: 'Badge!',
+  }
+};
+
+export const InProgress = {
+  args: {
+    variant: 'inProgress',
+    children: 'Badge!',
+  }
+};
+
+
+export const NotAvailable = {
+  args: {
+    variant: 'notAvailable',
+    children: 'Badge!',
+  }
+};
+
+
+export const Default = {
+  args: {
+    // variant: 'notAvailable',
+    children: 'Badge!',
+  }
+};
+
+
+export const CustomImage = {
+  args: {
+    // variant: 'notAvailable',
+    children: 'information',
+    image: <img src={info} className='fill-green-500 stroke-green-500' alt='information' />
+  }
+};
+
+
+export const CustomImageStyling = {
+  args: {
+    // variant: 'notAvailable',
+    children: 'information',
+    image: <img src={infoBlue} className='fill-green-500 stroke-green-500' alt='information' />,
+    className: 'border-blue-700 bg-blue-200',
+    classNameChild: 'text-blue-700',
+  }
+};

package/src/lib/Status.spec.tsx

@@ -0,0 +1,118 @@
+// Status.test.tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { axe } from 'vitest-axe';
+import { createRef } from 'react';
+import { Status } from './Status';
+
+describe('Status Component', () => {
+  it('renders with the default "available" variant and displays the check image', () => {
+    render(<Status>Available Status</Status>);
+
+    // Verify the children text is rendered.
+    expect(screen.getByText('Available Status')).toBeInTheDocument();
+
+    // Verify the default check image is rendered.
+    const img = screen.getByRole('img', { name: /check mark/i });
+    expect(img).toBeInTheDocument();
+
+    // Optionally, check that the outer container has a class from the available variant (e.g., bg-green-50)
+    const container = screen.getByText('Available Status').parentElement;
+    expect(container).toHaveClass('bg-green-50');
+  });
+
+  it('renders the "inProgress" variant and displays the clock image', () => {
+    render(<Status variant="inProgress">In Progress Status</Status>);
+
+    expect(screen.getByText('In Progress Status')).toBeInTheDocument();
+
+    const img = screen.getByRole('img', { name: /clock/i });
+    expect(img).toBeInTheDocument();
+
+    // Check that the container has a class for the inProgress variant (e.g., bg-yellow-50)
+    const container = screen.getByText('In Progress Status').parentElement;
+    expect(container).toHaveClass('bg-yellow-50');
+  });
+
+  it('renders the "notAvailable" variant and displays the close image', () => {
+    render(<Status variant="notAvailable">Not Available Status</Status>);
+
+    expect(screen.getByText('Not Available Status')).toBeInTheDocument();
+
+    const img = screen.getByRole('img', { name: /close/i });
+    expect(img).toBeInTheDocument();
+
+    const container = screen.getByText('Not Available Status').parentElement;
+    expect(container).toHaveClass('bg-red-50');
+  });
+
+  it('renders a custom image when the image prop is provided', () => {
+    render(
+      <Status image={<img src="custom.svg" alt="custom image" />}>
+        Custom Image Status
+      </Status>
+    );
+
+    expect(screen.getByText('Custom Image Status')).toBeInTheDocument();
+
+    // Verify the custom image is rendered instead of the default one.
+    const customImg = screen.getByRole('img', { name: /custom image/i });
+    expect(customImg).toBeInTheDocument();
+    expect(customImg).toHaveAttribute('src', 'custom.svg');
+  });
+
+  it('merges additional className props on the container', () => {
+    render(<Status className="extra-class">Extra Class Test</Status>);
+    const container = screen.getByText('Extra Class Test').parentElement;
+
+    // The container should include both the default classes and the extra class.
+    expect(container).toHaveClass('extra-class');
+    expect(container).toHaveClass('bg-green-50'); // default for "available" variant
+  });
+
+  it('merges additional classNameChild props on the text element', () => {
+    render(
+      <Status classNameChild="child-extra-class">
+        Child Extra Class Test
+      </Status>
+    );
+    const childDiv = screen.getByText('Child Extra Class Test');
+
+    expect(childDiv).toHaveClass('child-extra-class');
+    // Also verify that the default child classes (e.g., text-green-900) are still present.
+    expect(childDiv).toHaveClass('text-green-900');
+  });
+
+  it('merges additional classNameImage props on the image container', () => {
+    render(
+      <Status
+        classNameImage="img-extra-class"
+        image={<img src="custom.svg" alt="custom image" />}
+      >
+        Image Extra Class Test
+      </Status>
+    );
+    // The image is rendered inside a wrapping div; get that div.
+    const imageContainer = screen.getByRole('img', { name: /custom image/i })
+      .parentElement;
+
+    expect(imageContainer).toHaveClass('img-extra-class');
+    // Check that the default image container classes (e.g., w-5) are also present.
+    expect(imageContainer).toHaveClass('w-5');
+  });
+
+  it('forwards the ref correctly', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Status ref={ref}>Ref Forwarding Test</Status>);
+
+    // The ref should be attached to the outer container div.
+    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('has no detectable accessibility violations', async () => {
+    const { container } = render(<Status>Accessible Status</Status>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});