@arbor-education/design-system.components 0.3.5 → 0.4.0

package/src/components/editableText/EditableText.test.tsx

@@ -0,0 +1,242 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { EditableText } from './EditableText';
+
+describe('EditableText', () => {
+  const defaultProps = {
+    text: 'Test Text',
+    onEditSave: vi.fn(),
+  };
+
+  it('renders as a span element', () => {
+    const { container } = render(<EditableText {...defaultProps} />);
+    const span = container.querySelector('.ds-editable-text');
+    expect(span).toBeInTheDocument();
+    expect(span?.tagName).toBe('SPAN');
+  });
+
+  it('displays the text in view mode', () => {
+    render(<EditableText {...defaultProps} />);
+    const button = screen.getByRole('button', { name: /edit text/i });
+    expect(button).toHaveTextContent('Test Text');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<EditableText {...defaultProps} className="custom-class" />);
+    const span = container.querySelector('.ds-editable-text');
+    expect(span).toHaveClass('ds-editable-text', 'custom-class');
+  });
+
+  it('renders edit button with pencil icon in view mode', () => {
+    render(<EditableText {...defaultProps} />);
+    const button = screen.getByRole('button', { name: /edit text/i });
+    expect(button).toBeInTheDocument();
+    expect(button.querySelector('.ds-editable-text__button-icon')).toBeInTheDocument();
+  });
+
+  it('enters edit mode when edit button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<EditableText {...defaultProps} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const input = screen.getByRole('textbox', { name: /text/i });
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Test Text');
+    expect(input).toHaveFocus();
+  });
+
+  it('calls onEditSave when Enter key is pressed', async () => {
+    const user = userEvent.setup();
+    const onEditSave = vi.fn();
+    render(<EditableText {...defaultProps} onEditSave={onEditSave} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const input = screen.getByRole('textbox', { name: /text/i });
+    await user.clear(input);
+    await user.type(input, 'New Text');
+    await user.keyboard('{Enter}');
+
+    expect(onEditSave).toHaveBeenCalledWith('New Text');
+  });
+
+  it('calls onEditSave when input is blurred', async () => {
+    const user = userEvent.setup();
+    const onEditSave = vi.fn();
+    render(<EditableText {...defaultProps} onEditSave={onEditSave} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const input = screen.getByRole('textbox', { name: /text/i });
+    await user.clear(input);
+    await user.type(input, 'Updated Text');
+    await user.tab(); // Blur the input
+
+    await waitFor(() => {
+      expect(onEditSave).toHaveBeenCalledWith('Updated Text');
+    });
+  });
+
+  it('exits edit mode after saving', async () => {
+    const user = userEvent.setup();
+    render(<EditableText {...defaultProps} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const input = screen.getByRole('textbox', { name: /text/i });
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => {
+      expect(input).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /edit text/i })).toBeInTheDocument();
+    });
+  });
+
+  it('reverts text when Escape key is pressed', async () => {
+    const user = userEvent.setup();
+    const onEditSave = vi.fn();
+    render(<EditableText {...defaultProps} onEditSave={onEditSave} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const input = screen.getByRole('textbox', { name: /text/i });
+    await user.clear(input);
+    await user.type(input, 'Changed Text');
+    await user.keyboard('{Escape}');
+
+    await waitFor(() => {
+      expect(onEditSave).not.toHaveBeenCalled();
+      const viewButton = screen.getByRole('button', { name: /edit text/i });
+      expect(viewButton).toHaveTextContent('Test Text');
+    });
+  });
+
+  it('updates text when text prop changes', () => {
+    const { rerender } = render(<EditableText {...defaultProps} text="Original" />);
+
+    expect(screen.getByRole('button', { name: /edit text/i })).toHaveTextContent('Original');
+
+    rerender(<EditableText {...defaultProps} text="Updated" />);
+
+    expect(screen.getByRole('button', { name: /edit text/i })).toHaveTextContent('Updated');
+  });
+
+  it('starts in edit mode when isEditing prop is true', () => {
+    render(<EditableText {...defaultProps} isEditing={true} />);
+
+    const input = screen.getByRole('textbox', { name: /text/i });
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Test Text');
+  });
+
+  it('switches to edit mode when isEditing prop changes to true', () => {
+    const { rerender } = render(<EditableText {...defaultProps} isEditing={false} />);
+
+    expect(screen.getByRole('button', { name: /edit text/i })).toBeInTheDocument();
+
+    rerender(<EditableText {...defaultProps} isEditing={true} />);
+
+    expect(screen.getByRole('textbox', { name: /text/i })).toBeInTheDocument();
+  });
+
+  it('preserves text value across edit sessions', async () => {
+    const user = userEvent.setup();
+    const onEditSave = vi.fn();
+    render(<EditableText {...defaultProps} onEditSave={onEditSave} />);
+
+    // First edit
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+    const input = screen.getByRole('textbox', { name: /text/i });
+    await user.clear(input);
+    await user.type(input, 'First Edit');
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => {
+      expect(onEditSave).toHaveBeenCalledWith('First Edit');
+    });
+
+    // Second edit - should start with previous saved value
+    const buttonAgain = await screen.findByRole('button', { name: /edit text/i });
+    await user.click(buttonAgain);
+    const inputAgain = screen.getByRole('textbox', { name: /text/i });
+    expect(inputAgain).toHaveValue('First Edit');
+
+    await user.clear(inputAgain);
+    await user.type(inputAgain, 'Second Edit');
+    await user.keyboard('{Escape}'); // Cancel this time
+
+    // Should still have first edit value
+    await waitFor(() => {
+      const finalButton = screen.getByRole('button', { name: /edit text/i });
+      expect(finalButton).toHaveTextContent('First Edit');
+    });
+  });
+
+  it('inherits styles from parent element', () => {
+    const { container } = render(
+      <h1 style={{ fontSize: '32px', fontWeight: 'bold' }}>
+        <EditableText {...defaultProps} />
+      </h1>,
+    );
+
+    const span = container.querySelector('.ds-editable-text');
+    expect(span).toBeInTheDocument();
+    // Component should inherit font-size and font-weight from parent h1
+  });
+
+  it('renders textarea when multiline is true', async () => {
+    const user = userEvent.setup();
+    render(<EditableText {...defaultProps} multiline={true} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const textarea = screen.getByRole('textbox', { name: /text/i });
+    expect(textarea).toBeInTheDocument();
+    expect(textarea.tagName).toBe('TEXTAREA');
+  });
+
+  it('does not save on Enter key when multiline is true', async () => {
+    const user = userEvent.setup();
+    const onEditSave = vi.fn();
+    render(<EditableText {...defaultProps} onEditSave={onEditSave} multiline={true} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const textarea = screen.getByRole('textbox', { name: /text/i });
+    await user.clear(textarea);
+    await user.type(textarea, 'Line 1{Enter}Line 2');
+
+    // Enter should NOT trigger save in multiline mode
+    expect(onEditSave).not.toHaveBeenCalled();
+    expect(textarea).toHaveValue('Line 1\nLine 2');
+  });
+
+  it('saves multiline text on blur', async () => {
+    const user = userEvent.setup();
+    const onEditSave = vi.fn();
+    render(<EditableText {...defaultProps} onEditSave={onEditSave} multiline={true} />);
+
+    const button = screen.getByRole('button', { name: /edit text/i });
+    await user.click(button);
+
+    const textarea = screen.getByRole('textbox', { name: /text/i });
+    await user.clear(textarea);
+    await user.type(textarea, 'Line 1{Enter}Line 2{Enter}Line 3');
+    await user.tab(); // Blur the textarea
+
+    await waitFor(() => {
+      expect(onEditSave).toHaveBeenCalledWith('Line 1\nLine 2\nLine 3');
+    });
+  });
+});

package/src/components/editableText/EditableText.tsx

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import { TextInput } from 'Components/formField/inputs/text/TextInput';
+import { TextArea } from 'Components/formField/inputs/textArea/TextArea';
+import { Icon } from 'Components/icon/Icon';
+import { useEffect, useRef, useState, type KeyboardEvent } from 'react';
+
+type EditableTextProps = {
+  text: string;
+  className?: string;
+  onEditSave: (newText: string) => void;
+  isEditing?: boolean;
+  multiline?: boolean;
+};
+
+export const EditableText = ({ text: textProp, className = '', onEditSave, isEditing: isEditingProp = false, multiline = false }: EditableTextProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [text, setText] = useState(textProp);
+  const preEditText = useRef(textProp);
+
+  useEffect(() => {
+    setText(textProp);
+  }, [textProp]);
+
+  useEffect(() => {
+    setIsEditing(isEditingProp);
+  }, [isEditingProp]);
+
+  const handleEditSave = () => {
+    onEditSave(text);
+    preEditText.current = text;
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !multiline) {
+      handleEditSave();
+    }
+    if (e.key === 'Escape') {
+      setText(preEditText.current);
+      setIsEditing(false);
+    }
+  };
+
+  const InputComponent = multiline ? TextArea : TextInput;
+
+  return (
+    <span className={classNames('ds-editable-text', className)}>
+      {isEditing
+        ? (
+            <InputComponent
+              name="editable-text"
+              aria-label="Text"
+              className="ds-editable-text__input"
+              value={text}
+              onChange={e => setText(e.target.value)}
+              onBlur={handleEditSave}
+              onKeyDown={handleKeyDown}
+              autoFocus
+            />
+          )
+        : (
+            <button
+              className="ds-editable-text__button"
+              aria-label="Edit text"
+              onClick={() => setIsEditing(true)}
+            >
+              {text}
+              <Icon name="pencil" size={16} className="ds-editable-text__button-icon" />
+            </button>
+          )}
+    </span>
+  );
+};

package/src/components/editableText/editableText.scss

@@ -0,0 +1,54 @@
+.ds-editable-text {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    color: inherit;
+    text-align: inherit;
+    text-decoration: inherit;
+    text-transform: inherit;
+    letter-spacing: inherit;
+
+    &__input, &__button {
+        width: 100%;
+        box-sizing: border-box;
+        height: auto;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        min-width: 0;
+        font-size: inherit;
+        font-weight: inherit;
+        font-family: inherit;
+        line-height: inherit;
+        color: inherit;
+        text-align: inherit;
+        text-decoration: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
+    }
+
+    .ds-input--M {
+        height: auto;
+    }
+
+    &__button {
+        border: var(--border-weight) solid transparent;
+        border-radius: var(--form-field-radius);
+        background-color: transparent;
+        padding: 0 var(--form-field-spacing-horizontal);
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--color-grey-100);
+        }
+    }
+
+    &__button-icon {
+        color: var(--color-grey-500);
+        margin-left: var(--spacing-small);
+        flex-shrink: 0;
+    }
+}

package/src/components/formField/fieldset/fieldset.scss

@@ -9,8 +9,6 @@
 }
 
 .ds-fieldset__legend {
-    font-family: var(--font-family-standard);
-    font-size: var(--font-size-2-13);
     font-weight: var(--type-body-bold-weight);
     color: var(--form-field-label-color-text);
     line-height: 150%;

package/src/components/formField/formField.scss

@@ -1,6 +1,4 @@
 .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;

package/src/components/formField/inputs/checkbox/checkboxInput.scss

@@ -43,8 +43,6 @@
 
   .ds-checkbox-label__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);
   }

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

@@ -2,9 +2,6 @@
 
 .ds-input {
   width: 100%;
-  font-size: var(--type-body-p-size);
-  font-family: var(--font-family-standard);
-  font-weight: var(--font-weight-regular);
   border: var(--border-weight) solid var(--form-field-text-default-color-border);
   border-radius: var(--form-field-radius);
   color: var(--form-field-text-default-color-text);

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

@@ -19,8 +19,6 @@
 
   .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;

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

@@ -16,7 +16,6 @@
 .ds-select-dropdown__items--header {
   margin: 0;
   color: var(--form-dropdown-form-drop-item-title-color-text);
-  font-size: var(--font-size-2-13);
   padding: var(--spacing-xsmall) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
   border-bottom: var(--border-weight) solid var(--page-base-color-border);
 }

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

@@ -1,6 +1,4 @@
 .ds-label {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   font-weight: var(--type-body-bold-weight);
   color: var(--form-field-label-color-text);
   line-height: 150%;

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

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { Heading } from './Heading';
 import { Button } from '../button/Button';
 import { Icon } from '../icon/Icon';
+import { EditableText } from 'Components/editableText/EditableText';
 
 const meta: Meta<typeof Heading> = {
   title: 'Components/Heading',
@@ -13,6 +14,14 @@ export const Default = {
     children: ['Heading Text'],
     level: 1,
   },
+  argTypes: {
+    level: {
+      control: 'select',
+      options: [1, 2, 3, 4],
+      description: 'Heading level (h1-h4)',
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export const FloatingChildren = {
@@ -81,4 +90,53 @@ export const HeadingWithButtonsBothSides = {
   },
 };
 
+export const HeadingWithEditableText = {
+  args: {
+    level: 1,
+    children: [
+      <EditableText key={2} text="Editable Heading" onEditSave={() => {}} />,
+    ],
+  },
+};
+
+export const HeadingWithEditableTextAndButton = {
+  args: {
+    level: 1,
+    children: [
+      <Heading.InnerContainer key={1}><EditableText text="Editable Heading" onEditSave={() => {}} /></Heading.InnerContainer>,
+      <Heading.InnerContainer key={2}>
+        <Button>
+          <Icon name="info" />
+          Button Text
+        </Button>
+      </Heading.InnerContainer>,
+    ],
+  },
+};
+
+export const HeadingWithEditableTextAndButtonsBothSides = {
+  args: {
+    level: 1,
+    children: [
+      <Heading.InnerContainer key={1} className="medium-spacing-gap">
+        <Button variant="tertiary">
+          <Icon name="chevron-left" />
+          Button Text
+        </Button>
+        <EditableText text="Editable Heading" onEditSave={() => {}} />
+      </Heading.InnerContainer>,
+      <Heading.InnerContainer key={2} className="medium-spacing-gap">
+        <Button variant="secondary">
+          <Icon name="info" />
+          Button Text
+        </Button>
+        <Button>
+          <Icon name="info" />
+          Button Text
+        </Button>
+      </Heading.InnerContainer>,
+    ],
+  },
+};
+
 export default meta;

package/src/components/heading/heading.scss

@@ -17,7 +17,7 @@
 }
 
 h1 {
-  &.ds-heading {
+  &.ds-heading, .ds-editable-text__button, .ds-editable-text__input {
     font-family: var(--type-headings-h1-family);
     font-size: var(--type-headings-h1-size);
     font-weight: var(--type-headings-h1-weight);
@@ -26,7 +26,7 @@ h1 {
 }
 
 h2 {
-  &.ds-heading {
+  &.ds-heading, .ds-editable-text__button, .ds-editable-text__input {
     font-family: var(--type-headings-h2-family);
     font-size: var(--type-headings-h2-size);
     font-weight: var(--type-headings-h2-weight);
@@ -35,7 +35,7 @@ h2 {
 }
 
 h3 {
-  &.ds-heading {
+  &.ds-heading, .ds-editable-text__button, .ds-editable-text__input {
     font-family: var(--type-headings-h3-family);
     font-size: var(--type-headings-h3-size);
     font-weight: var(--type-headings-h3-weight);
@@ -44,7 +44,7 @@ h3 {
 }
 
 h4 {
-  &.ds-heading {
+  &.ds-heading, .ds-editable-text__button, .ds-editable-text__input {
     font-family: var(--type-headings-h4-family);
     font-size: var(--type-headings-h4-size);
     font-weight: var(--type-headings-h4-weight);

package/src/components/modal/modal.scss

@@ -23,9 +23,6 @@
     max-width: calc(100vw - var(--spacing-medium));
     max-height: calc(100vh - var(--spacing-medium));
     min-width: var(--modal-min-width);
-    font-family: var(--type-body-p-family);
-    font-size: var(--type-body-p-size);
-    font-weight: var(--type-body-p-weight);
     line-height: var(--type-body-line-height);
     color: var(--type-body-p-color);
 

package/src/components/pill/pill.scss

@@ -10,10 +10,7 @@
   cursor: pointer;
 
   /* typography/body/p1-reg */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
 
   &__inactive{

package/src/components/progress/Progress.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Progress } from './Progress';
+
+const meta = {
+  title: 'Components/Progress',
+  component: Progress,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    'aria-label': 'Progress bar',
+  },
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 0, max: 100 },
+      description: 'Current progress value',
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum progress value',
+    },
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default progress
+export const Default: Story = {
+  args: {
+    value: 50,
+    max: 100,
+  },
+};
+
+// Empty progress
+export const Empty: Story = {
+  args: {
+    value: 0,
+    max: 100,
+  },
+};
+
+// Quarter progress
+export const Quarter: Story = {
+  args: {
+    value: 25,
+    max: 100,
+  },
+};
+
+// Half progress
+export const Half: Story = {
+  args: {
+    value: 50,
+    max: 100,
+  },
+};
+
+// Three quarters progress
+export const ThreeQuarters: Story = {
+  args: {
+    value: 75,
+    max: 100,
+  },
+};
+
+// Complete progress
+export const Complete: Story = {
+  args: {
+    value: 100,
+    max: 100,
+  },
+};
+
+// Custom max value
+export const CustomMax: Story = {
+  args: {
+    value: 30,
+    max: 50,
+  },
+};