@arbor-education/design-system.components 0.0.3 → 0.0.5

package/src/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.tsx

@@ -0,0 +1,49 @@
+import { allowedIcons } from 'Components/icon/allowedIcons';
+import { Icon } from 'Components/icon/Icon';
+import classNames from 'classnames';
+import type { DropdownItemBaseProps } from 'Components/formField/inputs/dropdown/wrapper/DropdownWrapper';
+
+export type DropdownItemProps = {
+  value: string;
+  label?: string;
+  icon?: keyof typeof allowedIcons;
+} & DropdownItemBaseProps;
+
+export const DropdownItem = (props: DropdownItemProps) => {
+  const { label, value, icon, selected = false, onSelection, id } = props;
+
+  const itemClassNames = classNames('ds-dropdown-item', {
+    'ds-dropdown-item--pressed': selected,
+  });
+
+  return (
+    <div
+      role="option"
+      id={id}
+      className={itemClassNames}
+      onClick={() => onSelection?.(value)}
+      tabIndex={0} // Ensure the item is focusable
+      aria-selected={selected}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelection?.(value);
+        }
+      }}
+    >
+      <div className="ds-dropdown-item--content">
+        {icon && (
+          <span className="ds-dropdown-item--icon">
+            <Icon name={icon} size={16} />
+          </span>
+        )}
+        <span className="ds-dropdown-item--label">{label ? label : value}</span>
+        {selected && (
+          <span className="ds-dropdown-item--check-icon">
+            <Icon name="check" size={16} />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/formField/inputs/dropdown/items/dropdownItem/dropdownItem.scss

@@ -0,0 +1,62 @@
+
+.ds-dropdown-item {
+  display: flex;
+  padding: var(--form-dropdown-form-drop-item-spacing-vertical)
+  var(--form-dropdown-form-drop-item-spacing-horizontal);
+  align-items: center;
+  border-radius: var(--form-dropdown-form-drop-item-radius);
+  background: var(--form-dropdown-form-drop-item-default-color-background);
+  cursor: pointer;
+  color: var(--form-dropdown-form-drop-item-default-color-text);
+
+  /* typography/body/p1-regular */
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-style: normal;
+  font-weight: var(--type-body-p-weight);
+  line-height: 150%;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-brand-500);
+    background: var(--button-medium-secondary-default-color-background);
+  }
+
+  &:hover {
+    background: var(--form-dropdown-form-drop-item-hover-color-background);
+  }
+
+  &--pressed {
+    background: var(--form-dropdown-form-drop-item-active-color-background);
+    color: var(--form-dropdown-form-drop-item-active-color-text);
+  }
+
+  &--content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  &--icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+  }
+
+  &--check-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+  }
+
+  &--label {
+    flex: 1;
+  }
+
+  &--check {
+    margin-left: auto;
+  }
+}

package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames'; // Import the classNames utility
+import { Icon } from 'Components/icon/Icon'; // Import the Icon component
+import type { DropdownItemBaseProps } from 'Components/formField/inputs/dropdown/wrapper/DropdownWrapper'; // Import the base props type
+
+// Define or import the DropdownMultiLineItemProps type
+export type DropdownMultiLineItemProps = {
+  header: string;
+  label: string;
+} & DropdownItemBaseProps;
+
+export const DropdownMultiLineItem = (props: DropdownMultiLineItemProps) => {
+  const { value, label, header, selected, onSelection, id } = props;
+
+  const itemClassNames = classNames('ds-dropdown-item', {
+    'ds-dropdown-item--pressed': selected,
+  });
+
+  return (
+    <div
+      role="option"
+      id={id}
+      className={itemClassNames}
+      onClick={() => onSelection?.(value)}
+      tabIndex={0} // Ensure focusability
+      aria-selected={selected}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelection?.(value);
+        }
+      }}
+    >
+      <div className="ds-dropdown-item-multiline ds-dropdown-item--content">
+        <h4 className="ds-dropdown-item-multiline--header">
+          {header}
+          {selected && (
+            <span className="ds-dropdown-item-multiline--check-icon">
+              <Icon name="check" size={16} />
+            </span>
+          )}
+        </h4>
+        <div className="ds-dropdown-item-multiline--content">
+          {label ? label : value}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/dropdownMultiLineItem.scss

@@ -0,0 +1,52 @@
+
+.ds-dropdown-item-multiline {
+  display: inline-flex;
+  padding: var(--form-dropdown-multi-line-form-drop-item-multi-base-spacing-padding);
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--form-dropdown-multi-line-spacing-gap-vertical);
+
+  &.ds-dropdown-item {
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--color-brand-500);
+      background: var(--button-medium-secondary-default-color-background);
+    }
+  }
+
+  h4 {
+    margin: 0;
+  }
+
+  &--header {
+    align-self: stretch;
+    font-family: var(--type-body-bold-family);
+    font-size: var(--type-body-bold-size);
+    font-style: normal;
+    font-weight: var(--type-body-bold-weight);
+    line-height: 150%;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &--content {
+    align-self: stretch;
+    font-family: var(--type-body-p-family);
+    font-size: var(--type-body-p-size);
+    font-style: normal;
+    font-weight: var(--type-body-p-weight);
+    line-height: 150%;
+  }
+
+  &--check-icon {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+  }
+}

package/src/components/formField/inputs/dropdown/wrapper/DropdownWrapper.tsx

@@ -0,0 +1,138 @@
+import React, {
+  type SelectHTMLAttributes,
+  useState,
+  type ReactNode,
+  cloneElement,
+  useEffect,
+  useRef,
+} from 'react';
+import { DropdownButton } from 'Components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton';
+
+export type DropdownItemBaseProps = {
+  value: string;
+  selected?: boolean;
+  onSelection?: (value: string) => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export type DropdownWrapperProps = {
+  placeholder?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  errorText?: string;
+  children: ReactNode;
+  onSelectionChange: (value: string[]) => void;
+} & SelectHTMLAttributes<HTMLSelectElement>;
+
+export const DropdownWrapper = (props: DropdownWrapperProps) => {
+  const { placeholder, disabled, errorText, multiple, children, onSelectionChange } = props;
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!disabled) {
+      setDropdownOpen(!dropdownOpen);
+    }
+  };
+
+  const handleItemClick = (value: string) => {
+    if (!multiple) {
+      setSelected([value]);
+      setDropdownOpen(false);
+    }
+    else {
+      setSelected(prev =>
+        prev.includes(value) ? prev.filter(sel => sel !== value) : [...prev, value],
+      );
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!dropdownOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter') {
+        e.preventDefault();
+        setDropdownOpen(true);
+        setFocusedIndex(0);
+      }
+      return;
+    }
+
+    const items = React.Children.toArray(children).filter(child =>
+      React.isValidElement<DropdownItemBaseProps>(child),
+    );
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setFocusedIndex(prev => (prev + 1) % items.length);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setFocusedIndex(prev => (prev - 1 + items.length) % items.length);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < items.length) {
+          const item = items[focusedIndex] as React.ReactElement<DropdownItemBaseProps>;
+          handleItemClick(item.props.value);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setDropdownOpen(false);
+        break;
+      default:
+        break;
+    }
+  };
+
+  useEffect(() => {
+    onSelectionChange(selected);
+  }, [selected]);
+
+  return (
+    <div
+      className="ds-dropdown-wrapper"
+      ref={dropdownRef}
+      onKeyDown={handleKeyDown}
+      role="combobox"
+      aria-expanded={dropdownOpen}
+      aria-haspopup="listbox"
+      aria-disabled={disabled}
+    >
+
+      <DropdownButton
+        label={placeholder ?? ''}
+        disabled={disabled}
+        error={!!errorText}
+        pressed={dropdownOpen}
+        onClick={toggleDropdown}
+      />
+
+      {dropdownOpen && (
+        <div
+          role="listbox"
+          id="dropdownList"
+          className="ds-dropdown-wrapper--items"
+          aria-activedescendant={
+            focusedIndex >= 0 ? `dropdown-item-${focusedIndex}` : undefined
+          }
+        >
+          {React.Children.map(children, (child, index) => {
+            if (React.isValidElement<DropdownItemBaseProps>(child)) {
+              return cloneElement(child, {
+                selected: selected.includes(child.props.value),
+                onSelection: handleItemClick,
+                id: `dropdown-item-${index}`,
+              });
+            }
+            return child;
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/formField/inputs/dropdown/wrapper/dropdownWrapper.scss

@@ -0,0 +1,32 @@
+
+.ds-dropdown-wrapper {
+  color: var(--color-grey-600, #595959);
+
+  /* typography/body/p1-regular */
+  font-family: var(--type-body-p-family, Inter);
+  font-size: var(--type-body-p-size, 13px);
+  font-style: normal;
+  font-weight: var(--type-body-p-weight, 400);
+  line-height: 150%;
+
+
+  &--items {
+    h3 {
+      margin: 0;
+    }
+
+    &--header {
+      color: var(--form-dropdown-form-drop-item-title-color-text);
+      font-size: var(--type-body-bold-size);
+      font-style: normal;
+      font-weight: var(--type-body-bold-weight);
+      line-height: 150%;
+      display: flex;
+      padding: var(--spacing-xsmall) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+      border-bottom: 1px solid var(--page-base-color-border);
+    }
+  }
+}

package/src/components/formField/inputs/input.scss

@@ -4,72 +4,71 @@
   width: 100%;
   font-family: var(--font-family-standard);
   font-weight: var(--font-weight-regular);
-  border: 1px solid var(--form-field-placeholder-color-border);
+  border: var(--border-weight) solid var(--form-field-text-default-color-border);
   border-radius: var(--form-field-radius);
-  color: var(--colour-grey-900);
+  color: var(--form-field-text-default-color-text);
   transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-  line-height: 150%;
-  background-color: var(--form-field-placeholder-color-background);
-  padding: 0 var(--form-field-spacing-x);
+  line-height: var(--line-height-default);
+  background-color: var(--form-field-text-default-color-background);
+  padding: 0 var(--form-field-spacing-horizontal);
   box-sizing: border-box;
 
   &::placeholder {
-    color: var(--form-field-pill-placeholder-color-text);
+    color: var(--form-field-text-placeholder-color-text);
   }
 
   &:focus {
-    border-color: var(--form-field-focus-color-border);
-    background-color: var(--form-field-focus-color-background);
-    outline: 2px solid var(--button-medium-primary-focus-color-focus);
+    color: var(--form-field-text-focus-color-text);
+    border-color: var(--form-field-text-focus-color-border);
+    background-color: var(--form-field-text-focus-color-background);
+    outline: var(--focus-border) solid var(--button-medium-primary-focus-color-focus);
   }
 
   // Disabled state
   &:disabled {
-    background-color: var(--colour-grey-100);
-    border-color: var(--colour-grey-200);
-    color: var(--colour-grey-500);
+    background-color: var(--form-field-text-disabled-color-background);
+    border-color: var(--form-field-text-disabled-color-border);
+    color: var(--form-field-text-disabled-color-text);
     cursor: not-allowed;
     
-    &::placeholder {
-      color: var(--colour-grey-400);
-    }
-    
     &:hover {
-      border-color: var(--colour-grey-200);
+      border-color: var(--form-field-text-disabled-color-border);
     }
   }
 
   &:hover:not(:disabled, :focus) {
-    border-color: var(--form-field-hover-color-border);
-    background-color: var(--form-field-hover-color-background);
+    color: var(--form-field-text-hover-color-text);
+    border-color: var(--form-field-text-hover-color-border);
+    background-color: var(--form-field-text-hover-color-background);
   }
 
   // Input sizes
   &--M {
     font-size: var(--font-size-3-14);
-    height: var(--text-field-medium-height);
+    height: var(--form-field-text-medium-height);
   }
 
   &--S {
     font-size: var(--font-size-2-13);
-    height: var(--text-field-small-height);
+    height: var(--form-field-text-small-height);
   }
 
   // Error state
   &--error {
-    border-color: var(--colour-semantic-destructive-500);
+    border-color: var(--form-field-text-error-color-border);
+    color: var(--form-field-text-error-color-text);
     
     &:focus {
-      border-color: var(--colour-semantic-destructive-500);
-      box-shadow: 0 0 0 2px var(--colour-semantic-destructive-100-hover);
+      border-color: var(--form-field-text-error-color-border);
+      box-shadow: 0 0 0 var(--focus-border) var(--form-field-text-error-color-border);
     }
     
     &:hover:not(:disabled, :focus) {
-      border-color: var(--colour-semantic-destructive-300);
+      border-color: var(--form-field-text-hover-color-border);
     }
   }
 }
 
 .ds-textarea {
-  padding: var(--form-field-spacing-y) var(--form-field-spacing-x);
+  padding: var(--form-field-spacing-vertical) var(--form-field-spacing-padding-x);
 }

package/src/components/formField/inputs/number/NumberInput.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta } from '@storybook/react-vite';
+import { NumberInput } from './NumberInput';
+
+const meta: Meta<typeof NumberInput> = {
+  title: 'Components/FormField/Inputs/Numeric',
+  component: NumberInput,
+};
+
+export const Default = {
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    defaultValue: '',
+    step: 1,
+    disabled: false,
+    hasError: false,
+    placeholder: 'Enter a number',
+    min: 0,
+    max: 10,
+  },
+};
+
+export default meta;

package/src/components/formField/inputs/number/NumberInput.test.tsx

@@ -0,0 +1,33 @@
+import { describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NumberInput } from './NumberInput';
+import '@testing-library/jest-dom/vitest';
+
+describe('NumberInput component', () => {
+  test('NumberInput renders', () => {
+    render(<NumberInput placeholder="Enter a number" />);
+    expect(screen.getByPlaceholderText('Enter a number')).toBeInTheDocument();
+  });
+
+  test('NumberInput calls onChange when input changes', () => {
+    const onChange = vi.fn();
+    render(<NumberInput placeholder="Enter a number" onChange={onChange} />);
+    const inputElement = screen.getByPlaceholderText('Enter a number') as HTMLInputElement;
+
+    fireEvent.change(inputElement, { target: { value: '2' } });
+    expect(onChange).toHaveBeenCalled();
+    expect(inputElement.value).toBe('2');
+  });
+
+  test('Spinner buttons change the value of the input', () => {
+    render(<NumberInput placeholder="Enter a number" defaultValue="10" step={2} />);
+    const inputElement = screen.getByPlaceholderText('Enter a number') as HTMLInputElement;
+
+    fireEvent.click(screen.getByTestId('minus-button'));
+    expect(inputElement.value).toBe('8');
+    fireEvent.click(screen.getByTestId('plus-button'));
+    expect(inputElement.value).toBe('10');
+    fireEvent.click(screen.getByTestId('plus-button'));
+    expect(inputElement.value).toBe('12');
+  });
+});

package/src/components/formField/inputs/number/NumberInput.tsx

@@ -0,0 +1,107 @@
+import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
+import { useEffect, useRef, useState, type ChangeEvent, type InputHTMLAttributes } from 'react';
+
+export type NumberInputProps = {
+  hasError?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+export const NumberInput = (props: NumberInputProps) => {
+  const {
+    hasError,
+    className = '',
+    disabled,
+    onChange,
+    defaultValue = '',
+    step = 1,
+    min,
+    max,
+    ...rest
+  } = props;
+
+  const [value, setValue] = useState<string>(defaultValue.toString());
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.value = value;
+      onChange?.({ currentTarget: { value } } as ChangeEvent<HTMLInputElement>);
+    }
+  }, [value]);
+
+  const inputClasses = classNames(
+    'ds-input',
+    'ds-number-input',
+    className,
+  );
+
+  const handleSpinner = (step: string | number) => {
+    const currentValue = isNaN(Number(value)) ? 0 : Number(value);
+    const newValue = (currentValue + Number(step)).toString();
+    handleOnChange(newValue);
+  };
+
+  const handleOnChange = (newValue: string) => {
+    if (newValue !== value && (newValue === '' || !isNaN(Number(newValue)))
+    ) {
+      setValue(newValue);
+    }
+  };
+
+  const handleOnBlur = () => {
+    if (min !== undefined && Number(value) < Number(min)) {
+      setValue(min.toString());
+    }
+    if (max !== undefined && Number(value) > Number(max)) {
+      setValue(max.toString());
+    }
+  };
+
+  return (
+    <div className={classNames('ds-number-input__container', {
+      'ds-number-input__container--error': hasError,
+      'ds-number-input__container--disabled': disabled,
+    })}
+    >
+      <button
+        className="ds-number-input__spinner-button"
+        type="button"
+        disabled={disabled || (min !== undefined && Number(value) <= Number(min))}
+        onClick={() => handleSpinner(-step)}
+        aria-label="Minus button"
+        data-testid="minus-button"
+      >
+        <Icon name="minus" size={12} />
+      </button>
+
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="numeric"
+        autoComplete="off"
+        pattern="^[+\-]?\d+(,\d{2})?"
+        className={inputClasses}
+        disabled={disabled}
+        defaultValue={defaultValue}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => handleOnChange(e.currentTarget.value)}
+        onBlur={handleOnBlur}
+        step={step}
+        min={min}
+        max={max}
+        {...rest}
+      />
+
+      <button
+        className="ds-number-input__spinner-button"
+        type="button"
+        disabled={disabled || (max !== undefined && Number(value) >= Number(max))}
+        onClick={() => handleSpinner(step)}
+        aria-label="Plus button"
+        data-testid="plus-button"
+      >
+        <Icon name="plus" size={12} />
+      </button>
+    </div>
+
+  );
+};