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

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { FormField } from './FormField';
+
+const meta: Meta<typeof FormField> = {
+  title: 'Components/FormField',
+  component: FormField,
+};
+
+export const Default = {
+  args: {
+    id: 'text-input',
+    label: 'Text Input',
+    inputProps: {
+      placeholder: 'Enter your text',
+      onChange: fn(),
+    },
+    helperLinkText: 'More information',
+    helperLinkUrl: 'https://www.google.com',
+    errorText: 'This is some error text',
+    fieldDescription: 'This is some descriptive text for the field',
+    inputType: 'text',
+  },
+  argTypes: {
+    'helperLinkText': {
+      control: 'text',
+      description: 'Helper link text',
+    },
+    'helperLinkUrl': {
+      control: 'text',
+      description: 'Helper link URL',
+    },
+    'errorText': {
+      control: 'text',
+      description: 'Error text',
+    },
+    'fieldDescription': {
+      control: 'text',
+      description: 'Field description',
+    },
+    'inputType': {
+      control: 'select',
+      options: ['text', 'textarea'],
+      description: 'Input type',
+    },
+    'inputProps.size': {
+      control: 'select',
+      options: ['M', 'S'],
+      description: 'Input size',
+    },
+    'inputProps.disabled': {
+      control: 'boolean',
+      description: 'Disable the input',
+    },
+    'inputProps.placeholder': {
+      control: 'text',
+      description: 'Input placeholder text',
+    },
+  },
+};
+
+type Story = StoryObj<typeof meta>;
+
+// Form example with multiple inputs
+export const FormExample: Story = {
+  render: () => (
+    <div style={{ width: '400px', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <FormField
+        id="first-name"
+        label="First Name"
+        inputProps={{
+          placeholder: 'Enter your first name',
+        }}
+      />
+      <FormField
+        id="last-name"
+        label="Last Name"
+        inputProps={{
+          placeholder: 'Enter your first name',
+        }}
+      />
+      <FormField
+        id="email"
+        label="Email"
+        inputProps={{
+          placeholder: 'Enter your email',
+        }}
+        helperLinkText="More information"
+        helperLinkUrl="https://www.google.com"
+      />
+      <FormField
+        id="password"
+        label="Password"
+        inputProps={{
+          placeholder: 'Enter your first name',
+          type: 'password',
+        }}
+      />
+      <FormField
+        id="message"
+        label="Message"
+        inputType="textarea"
+        inputProps={{
+          placeholder: 'Enter a lovely message',
+        }}
+      />
+    </div>
+  ),
+};
+
+export default meta;

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

@@ -0,0 +1,41 @@
+import { expect, test, describe } from 'vitest';
+import { FormField } from './FormField';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+describe('Input component', () => {
+  test('renders a form field', () => {
+    render(<FormField inputType="text" label="Email" id="niceid" />);
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+  });
+
+  test('renders helper link when provided', () => {
+    render(<FormField helperLinkText="This is helper text" helperLinkUrl="https://www.google.com" inputProps={{ placeholder: 'Enter text' }} />);
+    expect(screen.getByText('This is helper text')).toBeInTheDocument();
+  });
+
+  test('renders error text when provided', () => {
+    render(<FormField errorText="This is an error" inputProps={{ placeholder: 'Enter text' }} />);
+    expect(screen.getByText('This is an error')).toBeInTheDocument();
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toHaveClass('ds-input--error');
+  });
+
+  test('applies disabled class and attribute', () => {
+    render(<FormField id="niceid" inputProps={{ disabled: true, placeholder: 'Enter text' }} />);
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toBeDisabled();
+  });
+
+  test('renders a textinput by default', () => {
+    render(<FormField id="niceid" inputProps={{ placeholder: 'Enter text' }} />);
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toHaveClass('ds-text-input');
+  });
+
+  test('renders a textarea when inputType is textarea', () => {
+    render(<FormField id="niceid" inputType="textarea" inputProps={{ placeholder: 'Enter text' }} />);
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toHaveClass('ds-textarea');
+  });
+});

package/src/components/formField/FormField.tsx

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+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';
+
+type FormFieldProps = {
+  className?: string;
+  label?: string;
+  id?: string;
+  fieldDescription?: React.ReactNode;
+  helperLinkText?: string;
+  helperLinkUrl?: string;
+  errorText?: string;
+} & (
+  | { inputType?: 'text'; inputProps?: TextInputProps }
+  | { inputType?: 'textarea'; inputProps?: TextAreaProps }
+);
+
+export const FormField = (props: FormFieldProps) => {
+  const { className, label, id, inputType = 'text', helperLinkText, helperLinkUrl, errorText, inputProps, fieldDescription } = props;
+  const classes = classNames('ds-form-field', className);
+  const describedByIds = [];
+  if (fieldDescription) {
+    describedByIds.push(`${id}-description`);
+  }
+  if (errorText) {
+    describedByIds.push(`${id}-error`);
+  }
+
+  const sharedProps = {
+    id,
+    'aria-describedby': describedByIds.join(' '),
+    'hasError': !!errorText,
+    'aria-invalid': !!errorText,
+  };
+
+  return (
+    <div className={classes}>
+      {label && (
+        <Label htmlFor={id}>
+          {label}
+        </Label>
+      )}
+      {fieldDescription && (
+        <span id={`${id}-description`} className="ds-form-field__description">{fieldDescription}</span>
+      )}
+      {inputType === 'text' && (
+        <TextInput {...sharedProps} {...(inputProps as TextInputProps)} />
+      )}
+      {inputType === 'textarea' && (
+        <TextArea {...sharedProps} {...(inputProps as TextAreaProps)} />
+      )}
+      {((helperLinkText && helperLinkUrl) || errorText) && (
+        <div className="ds-form-field__message">
+          {errorText && (
+            <span className="ds-form-field__message--error" id={`${id}-error`}>
+              <Icon size={12} name="triangle-alert" />
+              {errorText}
+            </span>
+          )}
+          {helperLinkText && helperLinkUrl && (
+            <a href={helperLinkUrl} aria-label={`${label} helper link`} className="ds-form-field__message--helper">
+              {helperLinkText}
+              {' '}
+              <Icon size={12} name="arrow-up-right" />
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/formField/formField.scss

@@ -0,0 +1,41 @@
+.ds-form-field {
+  font-family: var(--font-family-standard);
+  font-size: var(--font-size-2-13);
+  line-height: 150%;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__description {
+    margin-bottom: var(--form-field-spacing-y);
+    color: var(--form-field-description-color-text);
+    display: block;
+  }
+
+  &__message {
+    margin-top: var(--form-field-spacing-y);
+
+    &--error, &--helper {
+      display: flex;
+      align-items: center;
+      margin-top: var(--form-field-spacing-y);
+    }
+
+    &--error {
+      gap: var(--form-field-spacing-x);
+      color: var(--form-field-error-color-error-text);
+      
+      .ds-icon {
+        color: var(--form-field-error-color-error-icon);
+      }
+    }
+
+    &--helper {
+      color: var(--form-field-help-text-default-color-text);
+
+      a {
+        color: var(--form-field-help-text-default-color-text);
+        text-decoration: underline;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+// Base input styles
+
+.ds-input {
+  width: 100%;
+  font-family: var(--font-family-standard);
+  font-weight: var(--font-weight-regular);
+  border: 1px solid var(--form-field-placeholder-color-border);
+  border-radius: var(--form-field-radius);
+  color: var(--colour-grey-900);
+  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);
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--form-field-pill-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);
+  }
+
+  // Disabled state
+  &:disabled {
+    background-color: var(--colour-grey-100);
+    border-color: var(--colour-grey-200);
+    color: var(--colour-grey-500);
+    cursor: not-allowed;
+    
+    &::placeholder {
+      color: var(--colour-grey-400);
+    }
+    
+    &:hover {
+      border-color: var(--colour-grey-200);
+    }
+  }
+
+  &:hover:not(:disabled, :focus) {
+    border-color: var(--form-field-hover-color-border);
+    background-color: var(--form-field-hover-color-background);
+  }
+
+  // Input sizes
+  &--M {
+    font-size: var(--font-size-3-14);
+    height: var(--text-field-medium-height);
+  }
+
+  &--S {
+    font-size: var(--font-size-2-13);
+    height: var(--text-field-small-height);
+  }
+
+  // Error state
+  &--error {
+    border-color: var(--colour-semantic-destructive-500);
+    
+    &:focus {
+      border-color: var(--colour-semantic-destructive-500);
+      box-shadow: 0 0 0 2px var(--colour-semantic-destructive-100-hover);
+    }
+    
+    &:hover:not(:disabled, :focus) {
+      border-color: var(--colour-semantic-destructive-300);
+    }
+  }
+}
+
+.ds-textarea {
+  padding: var(--form-field-spacing-y) var(--form-field-spacing-x);
+}

package/src/components/formField/inputs/text/TextInput.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { TextInput } from './TextInput';
+
+const meta = {
+  title: 'Components/FormField/Inputs/TextInput',
+  component: TextInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    onChange: fn(),
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['M', 'S'],
+      description: 'Input size',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Input placeholder text',
+    },
+  },
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default input
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+    size: 'M',
+  },
+};

package/src/components/formField/inputs/text/TextInput.test.tsx

@@ -0,0 +1,31 @@
+import { expect, test, describe, vi } from 'vitest';
+import { TextInput } from './TextInput';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+describe('Input component', () => {
+  test('renders input element', () => {
+    render(<TextInput placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+  });
+
+  test('calls onChange when input changes', () => {
+    const onChange = vi.fn();
+    render(<TextInput placeholder="Enter text" onChange={onChange} />);
+    fireEvent.change(screen.getByPlaceholderText('Enter text'), { target: { value: 'Hello' } });
+    expect(onChange).toHaveBeenCalled();
+    expect((screen.getByPlaceholderText('Enter text') as HTMLInputElement).value).toBe('Hello');
+  });
+
+  test('applies default size class', () => {
+    render(<TextInput placeholder="Enter text" />);
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toHaveClass('ds-input--M');
+  });
+
+  test('applies correct size class when specified', () => {
+    render(<TextInput size="S" placeholder="Enter text" />);
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toHaveClass('ds-input--S');
+  });
+});

package/src/components/formField/inputs/text/TextInput.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { type InputHTMLAttributes } from 'react';
+
+export type TextInputProps = {
+  size?: 'M' | 'S';
+  hasError?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+export const TextInput = (props: TextInputProps) => {
+  const {
+    size = 'M',
+    hasError,
+    className = '',
+    disabled = false,
+    ...rest
+  } = props;
+
+  const inputClasses = classNames(
+    'ds-text-input',
+    'ds-input',
+    `ds-input--${size}`,
+    {
+      'ds-input--error': hasError,
+    },
+    className,
+  );
+
+  return (
+    <input
+      className={inputClasses}
+      disabled={disabled}
+      {...rest}
+    />
+  );
+};

package/src/components/formField/inputs/textArea/TextArea.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Components/FormField/Inputs/TextArea',
+  component: TextArea,
+};
+
+export const Default = {
+  args: {
+    title: 'titleValue',
+    onChange: fn(),
+  },
+};
+
+export default meta;

package/src/components/formField/inputs/textArea/TextArea.test.tsx

@@ -0,0 +1,19 @@
+import { expect, describe, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { TextArea } from './TextArea';
+import '@testing-library/jest-dom/vitest';
+
+describe('TextArea component', () => {
+  test('TextArea says hello', () => {
+    render(<TextArea placeholder="Hello I'm a TextArea!" />);
+    expect(screen.getByPlaceholderText("Hello I'm a TextArea!")).toBeInTheDocument();
+  });
+
+  test('calls onChange when input changes', () => {
+    const onChange = vi.fn();
+    render(<TextArea placeholder="Enter text" onChange={onChange} />);
+    fireEvent.change(screen.getByPlaceholderText('Enter text'), { target: { value: 'Hello' } });
+    expect(onChange).toHaveBeenCalled();
+    expect((screen.getByPlaceholderText('Enter text') as HTMLInputElement).value).toBe('Hello');
+  });
+});

package/src/components/formField/inputs/textArea/TextArea.tsx

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+import classNames from 'classnames';
+import type { ChangeEvent, TextareaHTMLAttributes } from 'react';
+
+export type TextAreaProps = {
+  hasError?: boolean;
+  autoSize?: boolean;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+
+export const TextArea = (props: TextAreaProps) => {
+  const {
+    hasError,
+    className = '',
+    disabled = false,
+    autoSize = true,
+    onChange,
+    ...rest
+  } = props;
+
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const inputClasses = classNames(
+    'ds-textarea',
+    'ds-input',
+    {
+      'ds-input--error': hasError,
+    },
+    className,
+  );
+
+  const autosizeTextArea = () => {
+    if (inputRef.current) {
+      inputRef.current.style.height = 'auto';
+      const verticalPadding = 4;
+      const newHeight = inputRef.current.scrollHeight;
+      inputRef.current.style.height = `${newHeight + verticalPadding}px`;
+    }
+  };
+
+  const handleOnChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange?.(e);
+    if (autoSize) {
+      autosizeTextArea();
+    }
+  };
+
+  return (
+    <textarea
+      ref={inputRef}
+      className={inputClasses}
+      disabled={disabled}
+      onChange={handleOnChange}
+      {...rest}
+    />
+  );
+};

package/src/components/formField/label/Label.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react-vite';
+import { Label } from './Label';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/FormField/Inputs/Label',
+  component: Label,
+};
+
+export const Default = {
+  args: {
+    children: 'Label',
+  },
+};
+
+export default meta;

package/src/components/formField/label/Label.test.tsx

@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Label } from './Label';
+import '@testing-library/jest-dom/vitest';
+
+test('Label says hello', () => {
+  render(<Label>Hello I'm a Label!</Label>);
+  expect(screen.getByText("Hello I'm a Label!")).toBeInTheDocument();
+});

package/src/components/formField/label/Label.tsx

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import type { HTMLProps } from 'react';
+
+export const Label = (props: HTMLProps<HTMLLabelElement>) => {
+  const { className, htmlFor, children } = props;
+  const classes = classNames('ds-label', className);
+  return <label className={classes} htmlFor={htmlFor}>{children}</label>;
+};

package/src/components/formField/label/label.scss

@@ -0,0 +1,9 @@
+.ds-label {
+  font-family: var(--font-family-standard);
+  font-size: var(--font-size-2-13);
+  font-weight: var(--font-weight-bold);
+  color: var(--form-field-label-color-text);
+  line-height: 150%;
+  margin-bottom: var(--form-field-spacing-y);
+  display: block;
+}

package/src/components/icon/customIcons/CheckSolid.tsx

@@ -1,5 +1,5 @@
 import type { CustomIconProps } from '../types';
-import { useMemoGenerateUuid } from '../../../utils/hooks/useMemoGenerateUuid';
+import { useMemoGenerateUuid } from 'Utils/hooks/useMemoGenerateUuid';
 
 export const CheckSolid = (props: CustomIconProps) => {
   const { size, color, ...rest } = props;

package/src/components/icon/customIcons/XSolid.tsx

@@ -1,5 +1,5 @@
 import type { CustomIconProps } from '../types';
-import { useMemoGenerateUuid } from '../../../utils/hooks/useMemoGenerateUuid';
+import { useMemoGenerateUuid } from 'Utils/hooks/useMemoGenerateUuid';
 
 export const XSolid = (props: CustomIconProps) => {
   const { size, color, ...rest } = props;

package/src/index.scss

@@ -1,7 +1,10 @@
-@use "./tokens.scss";
-@use "./global.scss";
-@use "./components/button/button.scss";
-@use "./components/heading/heading.scss";
-@use "./components/card/card.scss";
-@use "./components/pill/pill.scss";
-@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
+@use './tokens.scss';
+@use './global.scss';
+@use './components/button/button.scss';
+@use './components/heading/heading.scss';
+@use './components/card/card.scss';
+@use "./components/formField/formField.scss";
+@use "./components/formField/inputs/input.scss";
+@use "./components/formField/label/label.scss";
+@use './components/pill/pill.scss';
+@import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';

package/src/index.ts

@@ -1,6 +1,8 @@
-export { Button } from './components/button/Button';
-export { Heading } from './components/heading/Heading';
-export { HeadingInnerContainer } from './components/heading/HeadingInnerContainer';
-export { Icon } from './components/icon/Icon';
-export { Card } from './components/card/Card';
-export { Pill } from './components/pill/Pill';
+export { Button } from 'Components/button/Button';
+export { Heading } from 'Components/heading/Heading';
+export { HeadingInnerContainer } from 'Components/heading/HeadingInnerContainer';
+export { Icon } from 'Components/icon/Icon';
+export { Card } from 'Components/card/Card';
+export { Pill } from 'Components/pill/Pill';
+export { TextInput } from './components/formField/inputs/text/TextInput';
+export { TextArea } from './components/formField/inputs/textArea/TextArea';