@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Select.tsx

@@ -0,0 +1,311 @@
+import { useEffect, useRef, useState, HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+import chevronDown from '../assets/img/chevron-down.svg';
+import chevronUp from '../assets/img/chevron-up.svg';
+import chevronDownWhite from '../assets/img/chevron-down-white.svg';
+import chevronUpWhite from '../assets/img/chevron-up-white.svg';
+
+interface VariantType {
+  [key: string]: string;
+}
+
+
+const baseClasses = 'outline-hidden outline-offset-0  flex justify-between items-center w-full h-14 ' +
+  'border focus:outline-4 focus:mb-2 focus:outline-[#fa89f1] shadow-xs pl-4 pr-2 py-2 bg-white ' +
+  'text-base md:text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3] h-12 mt-1 font-["Arial"] ';
+
+const variants: VariantType = {
+  default: 'hover:bg-gray-200 text-black' +
+      'hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive ' +
+      'disabled:border-dha-mc-secondary-border disabled:border-2',
+  fill: 'hover:bg-[#0c2c8e] text-white bg-[#092068] ' +
+      'hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive ' +
+      'disabled:border-dha-mc-secondary-border disabled:border-2 py-3',
+  outline: 'bg-white disabled:border-dha-mc-secondary-border ' +
+    'disabled:text-dha-mc-checkbox-inactive',
+};
+
+type Option = {
+  name: string;
+  value?: string;
+};
+
+export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  classNameContainer?: string;
+  label?: string;
+  variant?: string;
+  options: Option[];
+  optionsLabel?: string;
+  disabled?: boolean;
+  error?: boolean;
+  width?: string;
+  setSelectedOption: (param: string) => void;
+}
+
+export const Select = ({
+  className,
+  classNameContainer = '',
+  label,
+  options,
+  optionsLabel,
+  disabled = false,
+  variant = 'default',
+  setSelectedOption,
+  error = false,
+  width = '',
+  ...props
+}: SelectProps) => {
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null); // ref to drop down portion only, determine if should display above/below
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAbove, setIsAbove] = useState(false);  // use to determine/display above/below button depending on avail space
+  const [selectedOptionName, setSelectedOptionName] = useState(optionsLabel || 'Options');
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const buttonHeight = useRef<string>('bottom-[60px]');
+  const [errorCss, setErrorCss] = useState<string>('');
+  // const [buttonHeight, setButtonHeight] = useState<string>('bottom-[45px]');
+  // const [buttonHeight, setButtonHeight] = useState<number | null>(null);
+
+
+  useEffect (() => {
+    if (buttonRef.current) {
+      const buttonRect = buttonRef.current.getBoundingClientRect();
+      // setButtonHeight(buttonRect.height);
+      const height = Math.floor(buttonRect.height) + 2;
+      buttonHeight.current = 'bottom-[' + height + 'px]';
+
+
+      // console.log('button height: ', buttonHeight.current);
+      // setButtonHeight('bottom-[' + Math.floor(buttonRect.height + 4) + 'px]');
+      // console.log('button height: ', buttonHeight);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [buttonRef.current]);
+
+
+  // Function to calculate dropdown position
+  const updateDropdownPosition = () => {
+    if (containerRef.current && dropdownRef.current) {
+      const buttonRect = containerRef.current.getBoundingClientRect();
+      const dropdownHeight = dropdownRef.current.offsetHeight;
+
+      // console.log('dropdownHeight: ', dropdownHeight);
+
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.body.offsetHeight;
+
+      // THIS IS THE SECRET SAUCE!
+      const containerHeight = windowHeight > documentHeight ? documentHeight : windowHeight;
+
+      // console.log('windowHeight: ', windowHeight);
+      // console.log('documentHeight: ', documentHeight);
+      // console.log('calculated containerHeight: ', containerHeight);
+      // console.log('buttonRect.bottom: ', buttonRect.bottom);
+
+      // Check if there's enough space below the button
+      const spaceBelow = containerHeight - buttonRect.bottom;
+      if (spaceBelow < dropdownHeight && buttonRect.top > dropdownHeight) {
+        setIsAbove(true); // Flip above if not enough space below
+      } else {
+        setIsAbove(false); // Default to below
+      }
+    }
+  };
+
+  // array of refs, one for each dropdown item
+  const itemRefs = useRef<HTMLButtonElement[]>([]);
+
+  // We might slice the array in case `options` changes
+  useEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, options.length);
+  }, [options]);
+
+  // Track which item is "focused" wrt arrow navigation
+  const [focusedIndex, setFocusedIndex] = useState<number>(0);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+    setFocusedIndex(0);
+  };
+
+
+  // px-4
+  // On Error, border-2 border-[#b3b3b3]
+  useEffect(() => {
+    error ? setErrorCss('border-2 border-[#ff0004] pl-[15px]') : setErrorCss('');
+  }, [error]);
+
+  // Close on click outside, ESC, focus outside, etc.
+  useEffect(() => {
+
+    function checkIfClickedOutside(event: MouseEvent | TouchEvent) {
+      if (isOpen && containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    function handleKeyDown(event: KeyboardEvent) {
+      if (isOpen && event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    }
+    function handleFocusIn(event: FocusEvent) {
+      if (isOpen && containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', checkIfClickedOutside);
+    document.addEventListener('touchend', checkIfClickedOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('focusin', handleFocusIn);
+
+    return () => {
+      document.removeEventListener('mousedown', checkIfClickedOutside);
+      document.removeEventListener('touchend', checkIfClickedOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('focusin', handleFocusIn);
+    };
+
+  }, [isOpen]);
+
+  useEffect(() => {
+
+    if (isOpen) {
+      updateDropdownPosition();
+      // Optional: Recalculate on window resize
+      // window.addEventListener("resize", updateDropdownPosition);
+      // return () => window.removeEventListener("resize", updateDropdownPosition);
+    }
+  }, [isOpen]);
+
+  // Whenever focusedIndex changes, focus the button at that index
+  useEffect(() => {
+    if (isOpen) {
+      itemRefs.current[focusedIndex]?.focus();
+    }
+  }, [focusedIndex, isOpen]);
+
+  // Key Down handler for the "menu" DIV.
+  const handleMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!isOpen) return;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setFocusedIndex((prev) => {
+          const nextIndex = (prev + 1) % options.length;
+          setSelectedIndex(nextIndex);
+          return nextIndex;
+        });
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        setFocusedIndex((prev) => {
+          const nextIndex = (prev - 1 + options.length) % options.length;
+          setSelectedIndex(nextIndex);
+          return nextIndex;
+        });
+        break;
+      case 'Home':
+        event.preventDefault();
+        setFocusedIndex(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        setFocusedIndex(options.length - 1);
+        break;
+      default:
+        break;
+    }
+  };
+
+
+  return (
+    <div
+      className={twMerge('relative inline-block text-left w-[292px] md:w-[343px] lg:w-[600px] max-w-full', classNameContainer)}
+      ref={containerRef}
+      {...props}
+      aria-disabled={disabled}
+    >
+      {label ? <p className="text-black mb-2 text-base font-['Arial']">{label}</p> : ''}
+
+      <button
+        onClick={toggleDropdown}
+        ref={buttonRef}
+        className={twMerge(baseClasses, variants[variant] || variants.default, errorCss, className,
+          (isOpen && isAbove && "rounded-b-lg") || (isOpen && !isAbove && 'rounded-t-lg') || 'rounded-lg')}
+        aria-label={'Select options - ' + selectedOptionName}
+        aria-disabled={disabled}
+        aria-expanded={isOpen}
+        aria-haspopup='listbox'
+        disabled={disabled}
+        tabIndex={0}
+      >
+        {selectedOptionName}
+        {isOpen ? variant === 'fill' ? <img src={chevronUpWhite} alt='chevron up' /> : <img src={chevronUp} alt='chevron up' />
+          : variant === 'fill' ? <img src={chevronDownWhite} alt='chevron down' /> : <img src={chevronDown} alt='chevron down' /> }
+      </button>
+
+      {isOpen && (
+        <div
+          role="listbox"
+          ref={dropdownRef}
+          aria-label="Select option"
+          onKeyDown={handleMenuKeyDown}
+          className={twMerge("absolute w-full shadow-lg bg-white ring-1 ring-white/5 focus:outline-hidden z-10 ",
+            ((isOpen && isAbove) && 'rounded-t-lg pt-1') || ((isOpen && !isAbove) && 'rounded-b-lg pb-1'),
+            isAbove && buttonHeight.current)}
+        >
+          {/* <ul
+            className="list"
+            role="listbox"
+            aria-label="Select option"
+            onKeyDown={handleMenuKeyDown}
+          > */}
+            {options.map((item, index) => (
+              // <li key={item.name}>
+                <button
+                  // ref={buttonRef}
+                  key={item.name}
+                  ref={el => { 
+                    itemRefs.current[index] = el!
+                  }} // store ref
+                  className='block w-full px-4 py-2 text-left text-base text-gray-700
+                            hover:bg-[#092068]/20 focus:outline-hidden focus:bg-[#092068]/20'
+                  role="option"
+                  aria-selected={selectedIndex === index}
+                  aria-label={'option ' + item.name}
+                  onClick={() => {
+                    setSelectedIndex(index);
+                    setSelectedOptionName(item.name);
+                    setSelectedOption(item.value || item.name);
+                    setIsOpen(false);
+                  }}
+                  onKeyDown={(event) => {
+                    if (
+                      event.key === 'Enter' ||
+                      event.code === 'Enter' ||
+                      event.key === ' '
+                    ) {
+                      setSelectedIndex(index);
+                      setSelectedOptionName(item.name);
+                      setSelectedOption(item.value || item.name);
+                      setIsOpen(false);
+                    } else if (event.key === 'Escape') {
+                      setIsOpen(false);
+                    }
+                  }}
+                >
+                  {item.name}
+                </button>
+              // </li>
+            ))}
+          {/* </ul> */}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,196 @@
+// Shield.stories.tsx
+
+// import { Meta, StoryFn} from '@storybook/react';
+import { Shield } from './Shield';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/react';
+import { Input, InputProps } from './Input';
+import { CharacterCounter, CharacterCounterProps } from './CharacterCounter';
+import { userEvent, within } from 'storybook/test';
+import { expect } from 'storybook/test';
+import { FC, useRef, useState } from 'react';
+
+// 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 { useState } from 'react';
+
+
+export default {
+  title: 'Components/Shield',
+  component: Shield,
+  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 Shield>;
+
+// DefaultShield story
+export const DefaultShield = {
+  args: {
+    variant: 'default',
+    subVariant: 'default',
+    children: 'Shield!',
+  }
+};
+
+// DefaultBlueShield story
+export const DefaultBlueShield = {
+  args: {
+    variant: 'default',
+    subVariant: 'blue',
+    children: 'Shield!',
+  }
+};
+
+// DefaultIconShield story
+export const DefaultIconShield = {
+  args: {
+    variant: 'icon',
+    subVariant: 'default',
+    children: 'Shield!',
+  }
+};
+
+
+// WarningHalf story
+// export const WarningHalfShield = {
+//   args: {
+//     variant: 'warning',
+//     subVariant: 'half',
+//     children: 'Shield!',
+//   }
+// };
+
+export const WarningHalfShield: StoryFn = () => {
+  return (
+    <div className='w-[600px] h-[300px] border-l border-r border-slate-300'>
+      <Shield variant='warning' subVariant='half'>I am a most excellent Shield, carefully designed by UX.</Shield>
+    </div>
+  );
+};
+
+
+export const ShieldTestClose: StoryFn = () => {
+  return (
+    <div className='w-[600px] h-[300px] border-l border-r border-slate-300'>
+      <Shield variant='warning' subVariant='half'>I am a most excellent Shield, carefully designed by UX.</Shield>
+    </div>
+  );
+};
+
+
+// Attach the play function after the story definition:
+ShieldTestClose.play = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
+
+  // Example: Locate an element labeled "Close modal" and click it.
+  const closeButton = canvas.getByLabelText('Close modal');
+  await userEvent.click(closeButton);
+
+  expect(closeButton).not.toBeVisible();
+};
+
+
+export const WarningFullShield: StoryFn = () => {
+  return (
+    <div className='w-[600px] h-[300px] border-l border-r border-slate-300'>
+      <Shield variant='warning' subVariant='full'>
+        I am a most excellent Shield, carefully designed by UX, and implemented
+        by the SDK Team. For more information, check out the Documentation and
+        Usage examples.
+      </Shield>
+    </div>
+  );
+};
+
+
+export const HazardHalfShield: StoryFn = () => {
+  return (
+    <div className='w-[600px] h-[300px] border-l border-r border-slate-300'>
+      <Shield variant='hazard' subVariant='half'>I am a most excellent Shield, carefully designed by UX.</Shield>
+    </div>
+  );
+};
+
+export const HazardFullShield: StoryFn = () => {
+  return (
+    <div className='w-[600px] h-[300px] border-l border-r border-slate-300'>
+      <Shield variant='hazard' subVariant='full'>
+        I am a most excellent Shield, carefully designed by UX, and implemented
+        by the SDK Team. For more information, check out the Documentation and
+        Usage examples.
+      </Shield>
+    </div>
+  );
+};
+
+export const GoHalfShield: StoryFn = () => {
+  return (
+    <div className='w-[600px] h-[300px] border-l border-r border-slate-300'>
+      <Shield variant='go' subVariant='half'>I am a most excellent Shield, carefully designed by UX.</Shield>
+    </div>
+  );
+};
+
+export const GoFullShield: StoryFn = () => {
+  return (
+    <div className='w-[600px] h-[300px] border-l border-r border-slate-300'>
+      <Shield variant='go' subVariant='full'>
+        I am a most excellent Shield, carefully designed by UX, and implemented
+        by the SDK Team. For more information, check out the Documentation and
+        Usage examples.
+      </Shield>
+    </div>
+  );
+};
+
+
+// GreenIconShield story
+export const GreenIconShield = {
+  args: {
+    variant: 'icon',
+    subVariant: 'green',
+    children: 'Shield!',
+  }
+};
+
+// CustomIconShield story
+export const CustomIconShield = {
+  args: {
+    variant: 'icon',
+    subVariant: 'custom',
+    className: 'inline-flex items-center gap-x-1.5 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-600',
+    classNameSvg: 'fill-red-400 stroke-red-400',
+    children: 'Shield!',
+  }
+};
+
+
+// DefaultMediaShield story
+export const DefaultMediaShield = {
+  args: {
+    variant: 'media',
+    subVariant: 'default',
+    children: <>
+      <h5 className='text-sm font-bold my-2'>Flu Season!</h5>
+      <p>Don't be caught unprepared. </p>
+    </>,
+    imagePath: 'src/assets/img/heartbeat.svg',
+    imageAlt: 'heartbeat icon',
+    classNameImage: 'mt-1',
+    className: 'pb-2',
+  },
+};