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

package/src/components/button/Button.tsx

@@ -1,11 +1,16 @@
 import classNames from 'classnames';
 import React, { type ButtonHTMLAttributes } from 'react';
 
+export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'primary-destructive' | 'secondary-destructive' | 'text-link' | 'dropdown';
+
+export type ButtonSize = 'M' | 'S';
+
 export type ButtonProps = {
-  type?: 'primary' | 'secondary' | 'tertiary' | 'primary-destructive' | 'secondary-destructive' | 'text-link';
-  size?: 'M' | 'S';
+  type?: ButtonType;
+  size?: ButtonSize;
   children?: React.ReactNode;
   className?: string;
+  error?: boolean;
   [key: string]: unknown;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
 
@@ -25,6 +30,9 @@ export const Button = (props: ButtonProps) => {
       className={classNames('ds-button',
         `ds-button--${type}`,
         `ds-button--${size}`,
+        {
+          'ds-button--error': props.error,
+        },
         className,
       )}
       onClick={onClick}

package/src/components/button/button.scss

@@ -3,11 +3,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--button-medium-spacing-gap-y);
+  gap: var(--button-medium-spacing-gap-vertical);
   border-radius: var(--button-medium-radius);
   font-family: var(--font-family-standard);
-  font-weight: var(--font-weight-regular);
-  padding: var(--button-medium-spacing-y) var(--button-medium-spacing-x);
+  font-weight: var(--font-weight-semi-bold);
+  padding: var(--button-medium-spacing-vertical) var(--button-medium-spacing-horizontal);
   border: none;
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -38,12 +38,12 @@
   &--primary {
     background-color: var(--button-medium-primary-default-color-background);
     color: var(--button-medium-primary-default-color-text);
-    border: 1px solid var(--button-medium-primary-default-color-border);
+    border: 1px solid var(--button-medium-primary-default-color-background);
 
     &:focus {
       background-color: var(--button-medium-primary-focus-color-background);
       color: var(--button-medium-primary-focus-color-text);
-      outline: 2px solid var(--button-medium-primary-focus-color-focus);
+      outline: var(--focus-border) solid var(--button-medium-primary-focus-color-focus);
     }
     
     &:hover {
@@ -61,12 +61,12 @@
   &--secondary {
     background-color: var(--button-medium-secondary-default-color-background);
     color: var(--button-medium-secondary-default-color-text);
-    border: 1px solid var(--button-medium-secondary-default-color-border);
+    border: var(--border-weight) solid var(--button-medium-secondary-default-color-border);
 
     &:focus {
       background-color: var(--button-medium-secondary-focus-color-background);
       color: var(--button-medium-secondary-focus-color-text);
-      outline: 2px solid var(--button-medium-secondary-focus-color-focus);
+      outline: var(--focus-border) solid var(--button-medium-secondary-focus-color-focus);
     }
     
     &:hover {
@@ -75,31 +75,69 @@
     }
     
     &:active {
-      background-color: var(--button-medium-secondary-pressed-color-background);
-      color: var(--button-medium-secondary-pressed-color-text);
+      background-color: var(--button-medium-secondary-active-color-background);
+      color: var(--button-medium-secondary-active-color-text);
     }
   }
 
-  // Tertiary Button
+  // dropdown
+
+  &--dropdown {
+    color: var(--color-grey-900, #2F2F2F);
+
+    /* 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%; /* 19.5px */
+    display: flex;
+    padding: var(--spacing-small)  var(--spacing-small) var(--spacing-small) var(--spacing-medium);
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--border-radius-small);
+    border: 1px solid var(--color-grey-200);
+    background: var(--button-medium-secondary-default-color-background);
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--color-brand-500);
+      background: var(--button-medium-secondary-default-color-background);
+    }
+
+    &:hover {
+      border: 1px solid var(--color-grey-500);
+      background: var(--color-mono-white);
+    }
+
+    &--error {
+      border: 1px solid var(--color-semantic-destructive-500);
+    }
+  }
+
+
+    // Tertiary Button
   &--tertiary {
-    background-color: var(--button-medium-tertiary-default-color-background);
-    color: var(--button-medium-tertiary-default-color-text);
-    border: 1px solid var(--button-medium-tertiary-default-color-border);
+    background-color: var(--button-small-tertiary-default-color-background);
+    color: var(--button-small-tertiary-default-color-text);
+    border: var(--border-weight) solid var(--button-small-tertiary-default-color-border);
 
     &:focus {
-      background-color: var(--button-medium-tertiary-focus-color-background);
-      color: var(--button-medium-tertiary-focus-color-text);
-      outline: 2px solid var(--button-medium-tertiary-focus-color-focus);
+      background-color: var(--button-small-tertiary-focus-color-background);
+      color: var(--button-small-tertiary-focus-color-text);
+      outline: var(--focus-border) solid var(--button-small-tertiary-focus-color-focus);
     }
     
     &:hover {
-      background-color: var(--button-medium-tertiary-hover-color-background);
-      color: var(--button-medium-tertiary-hover-color-text);
+      background-color: var(--button-small-tertiary-hover-color-background);
+      color: var(--button-small-tertiary-hover-color-text);
     }
     
     &:active {
-      background-color: var(--button-medium-tertiary-pressed-color-background);
-      color: var(--button-medium-tertiary-pressed-color-text);
+      background-color: var(--button-small-tertiary-active-color-background);
+      color: var(--button-small-tertiary-active-color-text);
     }
   }
 
@@ -107,12 +145,12 @@
   &--primary-destructive {
     background-color: var(--button-medium-primary-destructive-default-color-background);
     color: var(--button-medium-primary-destructive-default-color-text);
-    border: 1px solid var(--button-medium-primary-destructive-default-color-border);
+    border: var(--border-weight) solid var(--button-medium-primary-destructive-default-color-border);
 
     &:focus {
       background-color: var(--button-medium-primary-destructive-focus-color-background);
       color: var(--button-medium-primary-destructive-focus-color-text);
-      outline: 2px solid var(--button-medium-primary-destructive-focus-color-focus);
+      outline: var(--focus-border) solid var(--button-medium-primary-destructive-focus-color-focus);
     }
 
     &:hover {
@@ -121,8 +159,8 @@
     }
     
     &:active {
-      background-color: var(--button-medium-primary-destructive-pressed-color-background);
-      color: var(--button-medium-primary-destructive-pressed-color-text);
+      background-color: var(--button-medium-primary-destructive-active-color-background);
+      color: var(--button-medium-primary-destructive-active-color-text);
     }
   }
 
@@ -130,12 +168,12 @@
   &--secondary-destructive {
     background-color: var(--button-medium-secondary-destructive-default-color-background);
     color: var(--button-medium-secondary-destructive-default-color-text);
-    border: 1px solid var(--button-medium-secondary-destructive-default-color-border);
+    border: var(--border-weight) solid var(--button-medium-secondary-destructive-default-color-border);
 
     &:focus {
       background-color: var(--button-medium-secondary-destructive-focus-color-background);
       color: var(--button-medium-secondary-destructive-focus-color-text);
-      outline: 2px solid var(--button-medium-secondary-destructive-focus-color-focus);
+      outline: var(--focus-border) solid var(--button-medium-secondary-destructive-focus-color-focus);
     }
 
     &:hover {
@@ -144,8 +182,8 @@
     }
     
     &:active{
-      background-color: var(--button-medium-secondary-destructive-pressed-color-background);
-      color: var(--button-medium-secondary-destructive-pressed-color-text);
+      background-color: var(--button-medium-secondary-destructive-active-color-background);
+      color: var(--button-medium-secondary-destructive-active-color-text);
     }
   }
 
@@ -153,25 +191,29 @@
   &--text-link {
     background-color: var(--button-medium-text-link-default-color-background);
     color: var(--button-medium-text-link-default-color-text);
-    border: 1px solid var(--button-medium-text-link-default-color-border);
+    border: var(--border-weight) solid var(--button-medium-text-link-default-color-border);
 
     &:focus {
-      background-color: var(--button-medium-text-link-focus-color-background);
+      background-color: var(--button-medium-text-link-default-color-background);
       color: var(--button-medium-text-link-focus-color-text);
-      outline: 2px solid var(--button-medium-text-link-focus-color-focus);
+      outline: var(--focus-border) solid var(--button-medium-text-link-focus-color-focus);
     }
 
     &:hover {
-      background-color: var(--button-medium-text-link-hover-color-background);
+      background-color: var(--button-medium-text-link-default-color-background);
       color: var(--button-medium-text-link-hover-color-text);
     }
 
     &:active{
-      background-color: var(--button-medium-text-link-pressed-color-background);
+      background-color: var(--button-medium-text-link-default-color-background);
       color: var(--button-medium-text-link-pressed-color-text);
     }
   }
 
+  &--error {
+    border: 1px solid var(--color-semantic-destructive-500);
+  }
+
   // Disabled state
   &:disabled {
     opacity: 0.5;

package/src/components/card/Card.test.tsx

@@ -103,12 +103,6 @@ describe('Card Component', () => {
 
       expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
     });
-
-    test('uses arrow type when specified', () => {
-      const mockClick = vi.fn();
-      const { container } = render(<Card title="Clickable Card" onClick={mockClick} arrowType="arrow" />);
-      expect(container.querySelector('.ds-icon-arrow-right')).toBeInTheDocument();
-    });
   });
 
   describe('Keyboard interactions', () => {

package/src/components/card/Card.tsx

@@ -14,7 +14,6 @@ type CardProps = {
   pillColor?: PillColor;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
-  arrowType?: 'chevron' | 'arrow';
   iconScreenReaderText?: string;
 };
 
@@ -29,7 +28,6 @@ export const Card = ({
   disabled,
   pillText,
   pillColor,
-  arrowType = 'chevron',
 }: CardProps) => {
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     if (onClick) {
@@ -84,11 +82,18 @@ export const Card = ({
           {pillText && <Pill text={pillText} color={pillColor} />}
         </div>
         {isCardClickable && (
-          <Icon
-            name={`${arrowType}-right`}
-            className="ds-card__icon-click"
-            size={24}
-          />
+          <>
+            <Icon
+              name="chevron-right"
+              className="ds-card__icon-click"
+              size={24}
+            />
+            <Icon
+              name="arrow-right"
+              className="ds-card__icon-click"
+              size={24}
+            />
+          </>
         )}
       </div>
     </article>

package/src/components/card/card.scss

@@ -1,27 +1,45 @@
 .ds-card__container {
   display: flex;
   width: 100%;
-  padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
+  padding: var(--card-spacing-vertical) var(--card-spacing-horizontal);
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--card-spacing-gap-y, 16px);
-  border-radius: var(--card-radius, 8px);
-  border: 1px solid var(--card-default-color-border, #efefef);
-  background: var(--card-default-color-background, #fff);
+  gap: var(--card-spacing-gap-vertical) var(--card-spacing-gap-horizontal);
+  border-radius: var(--card-radius);
+  border: var(--border-weight) solid var(--card-default-color-border);
+  background: var(--card-default-color-background);
   color: var(--card-default-color-text);
-  line-height: 1.5;
+  line-height: var(--line-height-default);
+  box-sizing: border-box;
+
+  .ds-card__icon-click {
+    flex-shrink: 0;
+
+    &.ds-icon-arrow-right {
+      display: none;
+    }
+  }
 
   &:hover:not(.ds-card__container--disabled) {
-    border: 1px solid var(--card-hover-color-border, #efefef);
-    background: var(--card-hover-color-background, #fff);
+    border: var(--border-weight) solid var(--card-hover-color-border);
+    background: var(--card-hover-color-background);
     box-shadow: 0 4px 12px 0 rgb(32 32 32 / 8%);
+
+    .ds-card__icon-click {
+      &.ds-icon-chevron-right {
+        display: none;
+      }
+
+      &.ds-icon-arrow-right {
+        display: block;
+      }
+    }
   }
 
   &:focus:not(.ds-card__container--disabled) {
-    border: 1px solid var(--card-focus-color-border, #efefef);
-    background: var(--card-focus-color-background, #fff);
-    box-shadow: 0 0 0 3px
-      var(--button-medium-primary-focus-color-focus, #3cad51);
+    border: var(--border-weight) solid var(--card-focus-color-border);
+    background: var(--card-focus-color-background);
+    outline: var(--focus-border) solid var(--button-medium-primary-focus-color-focus);
   }
 
   &--clickable {
@@ -33,7 +51,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: var(--spacing-large, 16px);
+  gap: var(--card-spacing-gap-horizontal);
   width: 100%;
 
   .ds-card__icon-left {
@@ -44,7 +62,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: var(--card-spacing-gap-x);
+    gap: var(--card-spacing-gap-vertical);
     flex-grow: 1;
 
     .ds-card__title {
@@ -61,8 +79,4 @@
       font-weight: var(--type-body-p-weight);
     }
   }
-
-  .ds-card__icon-click {
-    flex-shrink: 0;
-  }
 }

package/src/components/formField/FormField.stories.tsx

@@ -41,7 +41,7 @@ export const Default = {
     },
     'inputType': {
       control: 'select',
-      options: ['text', 'textarea'],
+      options: ['text', 'textarea', 'number'],
       description: 'Input type',
     },
     'inputProps.size': {
@@ -105,6 +105,14 @@ export const FormExample: Story = {
           placeholder: 'Enter a lovely message',
         }}
       />
+      <FormField
+        id="age"
+        label="Age"
+        inputType="number"
+        inputProps={{
+          placeholder: 'Enter your age',
+        }}
+      />
     </div>
   ),
 };

package/src/components/formField/FormField.test.tsx

@@ -38,4 +38,10 @@ describe('Input component', () => {
     const input = screen.getByPlaceholderText('Enter text');
     expect(input).toHaveClass('ds-textarea');
   });
+
+  test('renders a number input when inputType is number', () => {
+    render(<FormField id="niceid" inputType="number" inputProps={{ placeholder: 'Enter a number' }} />);
+    const input = screen.getByPlaceholderText('Enter a number');
+    expect(input).toHaveClass('ds-number-input');
+  });
 });

package/src/components/formField/FormField.tsx

@@ -3,6 +3,7 @@ import { Label } from './label/Label';
 import { Icon } from '../icon/Icon';
 import { TextInput, type TextInputProps } from './inputs/text/TextInput';
 import { TextArea, type TextAreaProps } from './inputs/textArea/TextArea';
+import { NumberInput, type NumberInputProps } from './inputs/number/NumberInput';
 
 type FormFieldProps = {
   className?: string;
@@ -15,6 +16,7 @@ type FormFieldProps = {
 } & (
   | { inputType?: 'text'; inputProps?: TextInputProps }
   | { inputType?: 'textarea'; inputProps?: TextAreaProps }
+  | { inputType?: 'number'; inputProps?: NumberInputProps }
 );
 
 export const FormField = (props: FormFieldProps) => {
@@ -51,6 +53,9 @@ export const FormField = (props: FormFieldProps) => {
       {inputType === 'textarea' && (
         <TextArea {...sharedProps} {...(inputProps as TextAreaProps)} />
       )}
+      {inputType === 'number' && (
+        <NumberInput {...sharedProps} {...(inputProps as NumberInputProps)} />
+      )}
       {((helperLinkText && helperLinkUrl) || errorText) && (
         <div className="ds-form-field__message">
           {errorText && (

package/src/components/formField/formField.scss

@@ -6,35 +6,47 @@
   box-sizing: border-box;
 
   &__description {
-    margin-bottom: var(--form-field-spacing-y);
-    color: var(--form-field-description-color-text);
+    margin-bottom: var(--form-field-spacing-vertical);
+    color: var(--form-field-color-label-description-text);
     display: block;
   }
 
   &__message {
-    margin-top: var(--form-field-spacing-y);
+    margin-top: var(--form-field-spacing-vertical);
 
     &--error, &--helper {
       display: flex;
       align-items: center;
-      margin-top: var(--form-field-spacing-y);
+      margin-top: var(--form-field-spacing-vertical);
     }
-
+  
     &--error {
-      gap: var(--form-field-spacing-x);
-      color: var(--form-field-error-color-error-text);
+      gap: var(--form-field-spacing-horizontal);
+      color: var(--form-field-text-error-color-error-text);
       
       .ds-icon {
-        color: var(--form-field-error-color-error-icon);
+        color: var(--form-field-text-error-color-error-icon);
       }
     }
 
     &--helper {
       color: var(--form-field-help-text-default-color-text);
 
+      .ds-icon {
+        color: var(--form-field-help-text-default-color-icon);
+      }
+
       a {
         color: var(--form-field-help-text-default-color-text);
         text-decoration: underline;
+
+        &:hover {
+          color: var(--form-field-help-text-hover-color-text);
+
+          .ds-icon {
+            color: var(--form-field-help-text-hover-color-icon);
+          }
+        }
       }
     }
   }

package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta } from '@storybook/react-vite';
+import { CheckboxInput } from './CheckboxInput';
+
+const meta: Meta<typeof CheckboxInput> = {
+  title: 'Components/FormField/Inputs/Checkbox',
+  component: CheckboxInput,
+};
+
+export const Default = {
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    disabled: false,
+    checked: false,
+    indeterminate: false,
+    label: 'Label text',
+  },
+};
+
+export default meta;

package/src/components/formField/inputs/checkbox/CheckboxInput.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { CheckboxInput } from './CheckboxInput';
+import '@testing-library/jest-dom/vitest';
+
+describe('CheckboxInput component', () => {
+  test('CheckboxInput renders', () => {
+    render(<CheckboxInput label="Checkbox" />);
+    expect(screen.getByText('Checkbox')).toBeInTheDocument();
+  });
+
+  test('CheckboxInput is checked when checked is true', () => {
+    render(<CheckboxInput label="Checkbox" checked={true} />);
+
+    const checkboxElement = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkboxElement).toBeChecked();
+    expect(checkboxElement.matches(':checked')).toBe(true);
+  });
+
+  test('CheckboxInput is indeterminate when indeterminate is true', () => {
+    render(<CheckboxInput label="Checkbox" indeterminate={true} />);
+
+    const checkboxElement = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkboxElement.indeterminate).toBe(true);
+    expect(checkboxElement.matches(':indeterminate')).toBe(true);
+  });
+
+  test('CheckboxInput is disabled when disabled is true', () => {
+    render(<CheckboxInput label="Checkbox" disabled={true} />);
+
+    const checkboxElement = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkboxElement).toBeDisabled();
+    expect(checkboxElement.matches(':disabled')).toBe(true);
+  });
+});

package/src/components/formField/inputs/checkbox/CheckboxInput.tsx

@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import { useRef, useEffect, type InputHTMLAttributes } from 'react';
+import { Icon } from '../../../..';
+
+export type CheckboxInputProps = {
+  indeterminate?: boolean;
+  label: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+export const CheckboxInput = (props: CheckboxInputProps) => {
+  const {
+    className,
+    onChange,
+    disabled,
+    checked = false,
+    indeterminate = false,
+    label,
+    ...rest
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  const containerClasses = classNames(
+    'ds-checkbox-input__container',
+    className,
+  );
+
+  const iconName = indeterminate ? 'minus' : 'check';
+
+  let iconColor = 'var(--checkbox-input-control-checked-default-color-icon)';
+  if (disabled) {
+    if (indeterminate) {
+      iconColor
+        = 'var(--checkbox-input-control-indeterminate-disabled-color-icon)';
+    }
+    else {
+      iconColor = 'var(--checkbox-input-control-checked-disabled-color-icon)';
+    }
+  }
+  else if (indeterminate) {
+    iconColor
+      = 'var(--checkbox-input-control-indeterminate-default-color-icon)';
+  }
+
+  return (
+    <label className={containerClasses}>
+      <input
+        ref={inputRef}
+        type="checkbox"
+        disabled={disabled}
+        checked={checked}
+        onChange={onChange}
+        aria-checked={indeterminate ? 'mixed' : checked}
+        {...rest}
+      />
+      <span
+        className="ds-input ds-checkbox-input"
+        aria-hidden="true"
+        data-testid="checkbox-custom-input"
+      >
+        {(checked || indeterminate) && (
+          <Icon
+            name={iconName}
+            size={12}
+            color={iconColor}
+            className="ds-checkbox-input__icon"
+          />
+        )}
+      </span>
+      <span className="ds-checkbox-label__text">{label}</span>
+    </label>
+  );
+};