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

package/src/components/formField/inputs/number/numberInput.scss

@@ -0,0 +1,68 @@
+.ds-number-input__container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: var(--form-field-spacing-vertical) var(--form-field-spacing-padding-x);
+  gap: var(--form-field-spacing-horizontal) var(--form-field-spacing-vertical-gap);
+  border-radius: var(--form-field-radius);
+  border: var(--border-weight) solid var(--form-field-text-placeholder-color-border);
+  background: var(--form-field-text-placeholder-color-background);
+  
+  &:active {
+    border-color: var(--form-field-text-focus-color-border);
+    background: var(--form-field-text-focus-color-background);
+  }
+
+  &:hover:not(:focus-within) {
+    border-color: var(--form-field-text-hover-color-border);
+    background: var(--form-field-text-hover-color-background);
+  }
+
+  &:focus-within:not(:active) {
+    border-color: var(--form-field-text-focus-color-border);
+    background: var(--form-field-text-focus-color-background);
+    outline: var(--focus-border) solid var(--form-field-text-focus-color-border);
+  }
+
+  &--disabled {
+    background: var(--form-field-text-disabled-color-background);
+    border-color: var(--form-field-text-disabled-color-border);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &--error {
+    border-color: var(--form-field-text-error-color-border);
+  }
+
+  .ds-number-input {
+    text-align: center;
+    border: none;
+    flex: 1;
+    padding: 0;
+    color: var(--form-field-text-default-color-text);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .ds-number-input__spinner-button {
+    display: flex;
+    border: none;
+    cursor: pointer;
+    background: none;
+    justify-content: center;
+    align-items: center;
+    width: var(--icon-size-medium);
+    height: var(--icon-size-medium);
+    color: var(--form-field-icon-default-color-icon);
+    padding: 0;
+
+    &:disabled {
+      color: var(--form-field-icon-disabled-color-icon);
+    }
+  }
+
+}

package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { RadioButtonInput } from './RadioButtonInput';
+
+const meta = {
+  title: 'Components/FormField/Inputs/RadioButton',
+  component: RadioButtonInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    onChange: fn(),
+  },
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Whether the radio button is checked',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the radio button',
+    },
+    hasError: {
+      control: 'boolean',
+      description: 'Show error state',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the radio button',
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute for the radio button group',
+    },
+    value: {
+      control: 'text',
+      description: 'Value attribute for the radio button',
+    },
+  },
+} satisfies Meta<typeof RadioButtonInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default radio button
+export const Default: Story = {
+  args: {
+    name: 'example',
+    value: 'option1',
+    label: 'Option 1',
+    checked: false,
+  },
+};
+
+// Checked radio button
+export const Checked: Story = {
+  args: {
+    name: 'example',
+    value: 'option1',
+    label: 'Option 1',
+    checked: true,
+  },
+};
+
+// Disabled radio button
+export const Disabled: Story = {
+  args: {
+    name: 'example',
+    value: 'option1',
+    label: 'Option 1',
+    disabled: true,
+  },
+};
+
+// Disabled and checked
+export const DisabledChecked: Story = {
+  args: {
+    name: 'example',
+    value: 'option1',
+    label: 'Option 1',
+    disabled: true,
+    checked: true,
+  },
+};
+
+// Radio button group example
+export const RadioGroup: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      <RadioButtonInput name="group" value="option1" label="Option 1" />
+      <RadioButtonInput name="group" value="option2" label="Option 2" checked />
+      <RadioButtonInput name="group" value="option3" label="Option 3" />
+    </div>
+  ),
+};

package/src/components/formField/inputs/radio/RadioButtonInput.test.tsx

@@ -0,0 +1,37 @@
+import { expect, test, describe, vi } from 'vitest';
+import { RadioButtonInput } from './RadioButtonInput';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+describe('RadioButtonInput component', () => {
+  test('renders radio button element', () => {
+    render(<RadioButtonInput name="test" value="option1" label="Option 1" />);
+    const radio = screen.getByRole('radio', { name: 'Option 1' });
+    expect(radio).toBeInTheDocument();
+  });
+
+  test('renders with label', () => {
+    render(<RadioButtonInput name="test" value="option1" label="Option 1" />);
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  test('calls onChange when radio is clicked', () => {
+    const onChange = vi.fn();
+    render(<RadioButtonInput name="test" value="option1" label="Option 1" onChange={onChange} />);
+    const radio = screen.getByRole('radio', { name: 'Option 1' });
+    fireEvent.click(radio);
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  test('applies checked state', () => {
+    render(<RadioButtonInput name="test" value="option1" label="Option 1" checked />);
+    const radio = screen.getByRole('radio', { name: 'Option 1' }) as HTMLInputElement;
+    expect(radio.checked).toBe(true);
+  });
+
+  test('applies disabled state', () => {
+    render(<RadioButtonInput name="test" value="option1" label="Option 1" disabled />);
+    const radio = screen.getByRole('radio', { name: 'Option 1' }) as HTMLInputElement;
+    expect(radio.disabled).toBe(true);
+  });
+});

package/src/components/formField/inputs/radio/RadioButtonInput.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import { type InputHTMLAttributes } from 'react';
+
+export type RadioButtonInputProps = {
+  label?: string;
+  hasError?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const RadioButtonInput = (props: RadioButtonInputProps) => {
+  const {
+    label,
+    hasError,
+    className = '',
+    disabled = false,
+    checked = false,
+    id,
+    name,
+    value,
+    onChange,
+    ...rest
+  } = props;
+
+  const containerClasses = classNames(
+    'ds-radio-button-input__container',
+    className,
+  );
+
+  return (
+    <label className={containerClasses}>
+      <input
+        type="radio"
+        id={id}
+        name={name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        className="ds-radio-button-input__input"
+        aria-invalid={hasError}
+        {...rest}
+      />
+      <span className="ds-radio-button-input__indicator" />
+      {label && <span className="ds-radio-button-input__text">{label}</span>}
+    </label>
+  );
+};

package/src/components/formField/inputs/radio/radioButtonInput.scss

@@ -0,0 +1,100 @@
+.ds-radio-button-input__container {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--checkbox-or-radio-button-group-spacing-gap-horizontal);
+  position: relative;
+
+  &:focus-within {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    border-radius: var(--checkbox-radius);
+  }
+
+  .ds-radio-button-input__input {
+    position: absolute;
+    appearance: none;
+    background-color: #fff;
+    margin: 0;
+  }     
+
+  .ds-radio-button-input__text {
+    flex: 1 0 0;
+    font-size: var(--type-body-p-size);
+    font-weight: var(--type-body-p-weight);
+    color: var(--checkbox-default-color-text);
+    line-height: var(--line-height-default);
+    user-select: none;
+
+    &--disabled {
+      cursor: not-allowed;
+      color: var(--checkbox-or-radio-button-group-disabled-color-text);
+    }
+  }
+
+  .ds-radio-button-input__indicator {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border: var(--border-weight) solid var(--checkbox-or-radio-button-group-default-color-border);
+    border-radius: 50%;
+    background-color: var(--checkbox-or-radio-button-group-default-color-background);
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    box-sizing: border-box;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0.625rem;
+      height: 0.625rem;
+      border-radius: 50%;
+      background-color: transparent;
+      transition: background-color 0.2s;
+    }
+  }
+
+
+  .ds-radio-button-input__input:checked + .ds-radio-button-input__indicator {
+    border-color: var(--checkbox-or-radio-button-group-selected-color-border);
+    background-color: var(--checkbox-or-radio-button-group-selected-color-background);
+
+    &::after {
+      background-color: var(--checkbox-or-radio-button-group-selected-color-check);
+    }
+  }
+
+  .ds-radio-button-input__input:disabled + .ds-radio-button-input__indicator {
+    border-color: var(--checkbox-or-radio-button-group-disabled-color-border);
+    background-color: var(--checkbox-or-radio-button-group-disabled-color-background);
+    cursor: not-allowed;
+  }
+
+  .ds-radio-button-input__input:checked:disabled + .ds-radio-button-input__indicator {
+    &::after {
+      background-color: var(--checkbox-or-radio-button-group-disabled-color-check);
+    }
+  }
+
+  &:hover:not(:has(.ds-radio-button-input__input:disabled)) {
+    .ds-radio-button-input__indicator {
+      border-color: var(--checkbox-or-radio-button-group-hover-color-border);
+      background-color: var(--checkbox-or-radio-button-group-hover-color-background);
+    }
+
+    .ds-radio-button-input__label {
+      color: var(--checkbox-or-radio-button-group-hover-color-text);
+    }
+
+    .ds-radio-button-input__input:checked + .ds-radio-button-input__indicator {
+      border-color: var(--checkbox-or-radio-button-group-selected-hover-color-border);
+      background-color: var(--checkbox-or-radio-button-group-selected-hover-color-background);
+
+      &::after {
+        background-color: var(--checkbox-or-radio-button-group-selected-hover-color-check);
+      }
+    }
+  }
+}
+

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

@@ -4,6 +4,10 @@
   font-weight: var(--font-weight-bold);
   color: var(--form-field-label-color-text);
   line-height: 150%;
-  margin-bottom: var(--form-field-spacing-y);
+  margin-bottom: var(--form-field-spacing-vertical);
   display: block;
+
+  &:has(+ .ds-form-field__description) {
+    margin-bottom: var(--form-field-spacing-vertical-gap);
+  }
 }

package/src/components/heading/Heading.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta } from '@storybook/react-vite';
 import { Heading } from './Heading';
 import { Button } from '../button/Button';
 import { Icon } from '../icon/Icon';
-import { HeadingInnerContainer } from './HeadingInnerContainer';
 
 const meta: Meta<typeof Heading> = {
   title: 'Components/Heading',
@@ -18,7 +17,7 @@ export const Default = {
 
 export const FloatingChildren = {
   args: {
-    children: [<HeadingInnerContainer key={1}>Text floating left</HeadingInnerContainer>, <span key={2}>Text floating right</span>],
+    children: [<Heading.InnerContainer key={1}>Text floating left</Heading.InnerContainer>, <span key={2}>Text floating right</span>],
     level: 1,
   },
 };
@@ -27,13 +26,13 @@ export const HeadingWithSingleButton = {
   args: {
     level: 1,
     children: [
-      <HeadingInnerContainer key={1}>Heading</HeadingInnerContainer>,
-      <HeadingInnerContainer key={2}>
+      <Heading.InnerContainer key={1}>Heading</Heading.InnerContainer>,
+      <Heading.InnerContainer key={2}>
         <Button>
           <Icon name="info" />
           Button Text
         </Button>
-      </HeadingInnerContainer>,
+      </Heading.InnerContainer>,
     ],
   },
 };
@@ -42,8 +41,8 @@ export const HeadingWithMultipleButtons = {
   args: {
     level: 1,
     children: [
-      <HeadingInnerContainer key={1}>Heading</HeadingInnerContainer>,
-      <HeadingInnerContainer key={2} className="medium-spacing-gap">
+      <Heading.InnerContainer key={1}>Heading</Heading.InnerContainer>,
+      <Heading.InnerContainer key={2} className="medium-spacing-gap">
         <Button type="secondary">
           <Icon name="info" />
           Button Text
@@ -52,7 +51,7 @@ export const HeadingWithMultipleButtons = {
           <Icon name="info" />
           Button Text
         </Button>
-      </HeadingInnerContainer>,
+      </Heading.InnerContainer>,
     ],
   },
 };
@@ -61,14 +60,14 @@ export const HeadingWithButtonsBothSides = {
   args: {
     level: 1,
     children: [
-      <HeadingInnerContainer key={1} className="medium-spacing-gap">
+      <Heading.InnerContainer key={1} className="medium-spacing-gap">
         <Button type="tertiary">
           <Icon name="chevron-left" />
           Button Text
         </Button>
         Heading
-      </HeadingInnerContainer>,
-      <HeadingInnerContainer key={2} className="medium-spacing-gap">
+      </Heading.InnerContainer>,
+      <Heading.InnerContainer key={2} className="medium-spacing-gap">
         <Button type="secondary">
           <Icon name="info" />
           Button Text
@@ -77,7 +76,7 @@ export const HeadingWithButtonsBothSides = {
           <Icon name="info" />
           Button Text
         </Button>
-      </HeadingInnerContainer>,
+      </Heading.InnerContainer>,
     ],
   },
 };

package/src/components/heading/Heading.tsx

@@ -1,4 +1,21 @@
-import { createElement, type HTMLProps } from 'react';
+import classNames from 'classnames';
+import { createElement, type HTMLAttributes, type HTMLProps } from 'react';
+
+type HeadingSubContainerProps = HTMLAttributes<HTMLSpanElement>;
+
+const HeadingInnerContainer = (props: HeadingSubContainerProps) => {
+  const { className, ...rest } = props;
+
+  return (
+    <span
+      className={classNames(
+        'ds-heading__inner-container',
+        className,
+      )}
+      {...rest}
+    />
+  );
+};
 
 type HeadingProps = {
   level?: 1 | 2 | 3 | 4;
@@ -13,5 +30,7 @@ export const Heading = (props: HeadingProps) => {
     4: 'h4',
   }[level];
 
-  return createElement(Component, { className: 'ds-heading', ...props }, children);
+  return createElement(Component, { ...props, className: classNames('ds-heading', props.className) }, children);
 };
+
+Heading.InnerContainer = HeadingInnerContainer;

package/src/components/heading/heading.scss

@@ -20,6 +20,7 @@ h1 {
     font-family: var(--type-headings-h1-family);
     font-size: var(--type-headings-h1-size);
     font-weight: var(--type-headings-h1-weight);
+    line-height: var(--type-headings-h1-line-height);
   }
 }
 
@@ -28,6 +29,7 @@ h2 {
     font-family: var(--type-headings-h2-family);
     font-size: var(--type-headings-h2-size);
     font-weight: var(--type-headings-h2-weight);
+    line-height: var(--type-headings-h2-line-height);
   }
 }
 
@@ -36,6 +38,7 @@ h3 {
     font-family: var(--type-headings-h3-family);
     font-size: var(--type-headings-h3-size);
     font-weight: var(--type-headings-h3-weight);
+    line-height: var(--type-headings-h3-line-height);
   }
 }
 
@@ -44,5 +47,6 @@ h4 {
     font-family: var(--type-headings-h4-family);
     font-size: var(--type-headings-h4-size);
     font-weight: var(--type-headings-h4-weight);
+    line-height: var(--type-headings-h4-line-height);
   }
 }

package/src/components/icon/Icon.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta } from '@storybook/react-vite';
 import { Icon } from './Icon';
+import { allowedIcons } from './allowedIcons';
 
 const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
@@ -11,6 +12,13 @@ export const Default = {
     name: '3-dot',
     size: 16,
   },
+  argTypes: {
+    name: {
+      control: 'select',
+      description: 'Icon name',
+      options: Object.keys(allowedIcons),
+    },
+  },
 };
 
 export default meta;

package/src/components/icon/Icon.tsx

@@ -1,12 +1,12 @@
 import type { IconSize } from './types';
-import { allowedIcons } from './allowedIcons';
+import { allowedIcons, type IconName } from './allowedIcons';
 import classNames from 'classnames';
 
 type IconProps = {
   size?: IconSize;
   color?: string;
   screenReaderText?: string;
-  name: keyof typeof allowedIcons;
+  name: IconName;
   className?: string;
   ariaLabel?: string;
 };

package/src/components/icon/allowedIcons.tsx

@@ -206,3 +206,5 @@ export const allowedIcons = {
   ),
   'x-solid': (props: CustomIconProps) => <XSolid {...props} />,
 } as const;
+
+export type IconName = keyof typeof allowedIcons;

package/src/components/pill/pill.scss

@@ -1,22 +1,22 @@
 .ds-pill {
   display: flex;
-  padding: var(--tag-spacing-x, 8px) var(--tag-spacing-y, 12px);
+  padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
   align-items: center;
-  gap: var(--tag-spacing-gap-y, 8px);
-  border-radius: var(--tag-radius, 99px);
+  gap: var(--tag-spacing-gap-horizontal);
+  border-radius: var(--tag-radius);
   flex-grow: 0;
   width: fit-content;
 
   /* typography/body/p1-reg */
   font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size, 13px);
+  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight, 400);
+  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
   
   &--orange {
-    color: var(--tag-category-orange-color-text, #7E3E00);
-    background: var(--tag-category-orange-color-background, #F7EED8);
+    color: var(--tag-category-orange-color-text);
+    background: var(--tag-category-orange-color-background);
   }
 
   &--blue {

package/src/components/section/Section.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta } from '@storybook/react-vite';
+import { Section } from './Section';
+
+const meta: Meta<typeof Section> = {
+  title: 'Components/Section',
+  component: Section,
+  globals: {
+    backgrounds: { value: 'dark' },
+  },
+};
+
+export const Default = {
+  args: {
+    title: 'titleValue',
+    children: [<p key={1}>Sunt consectetur esse labore dolor consequat tempor dolor incididunt. Ullamco veniam ex enim consequat esse. Qui aute consequat dolore dolore ipsum commodo magna minim consectetur deserunt veniam in ipsum. Aute veniam do mollit cupidatat laboris. Laborum nisi est qui et eiusmod. Enim aliqua quis officia ut eiusmod quis dolore id commodo ipsum cillum sunt adipisicing laboris. Et non est sunt cillum ipsum.</p>],
+  },
+};
+
+export const NestedSections = {
+  args: {
+    title: 'Parent Section',
+    collapsible: true,
+    children: [
+      <Section key={1} title="Sub-section 1" collapsible>
+        <p>Eu nisi dolore qui irure irure nulla aliqua commodo non sint dolor consectetur. Ullamco dolore ut exercitation ad cupidatat ipsum. Nisi proident esse nisi ullamco irure incididunt eiusmod fugiat est culpa Lorem. Dolor esse ut minim magna. In qui fugiat non nulla eu mollit enim excepteur consequat qui consequat occaecat aliquip adipisicing. Eu est nisi irure laboris culpa amet consectetur irure quis duis.</p>
+      </Section>,
+      <Section key={2} title="Sub-section 2" collapsible>
+        <p>Eu nisi dolore qui irure irure nulla aliqua commodo non sint dolor consectetur. Ullamco dolore ut exercitation ad cupidatat ipsum. Nisi proident esse nisi ullamco irure incididunt eiusmod fugiat est culpa Lorem. Dolor esse ut minim magna. In qui fugiat non nulla eu mollit enim excepteur consequat qui consequat occaecat aliquip adipisicing. Eu est nisi irure laboris culpa amet consectetur irure quis duis.</p>
+      </Section>,
+    ],
+  },
+};
+
+export default meta;