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

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

@@ -0,0 +1,88 @@
+import { expect, test, describe } from 'vitest';
+import { Progress } from './Progress';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+describe('Progress component', () => {
+  test('renders progress bar with default values', () => {
+    const { container } = render(<Progress />);
+    const progressRoot = container.querySelector('.ds-progress');
+    expect(progressRoot).toBeInTheDocument();
+  });
+
+  test('renders progress indicator', () => {
+    const { container } = render(<Progress value={50} />);
+    const indicator = container.querySelector('.ds-progress__indicator');
+    expect(indicator).toBeInTheDocument();
+  });
+
+  test('applies correct transform style for 0% progress', () => {
+    const { container } = render(<Progress value={0} max={100} />);
+    const indicator = container.querySelector('.ds-progress__indicator') as HTMLElement;
+    expect(indicator).toHaveStyle({ transform: 'translateX(-100%)' });
+  });
+
+  test('applies correct transform style for 50% progress', () => {
+    const { container } = render(<Progress value={50} max={100} />);
+    const indicator = container.querySelector('.ds-progress__indicator') as HTMLElement;
+    expect(indicator).toHaveStyle({ transform: 'translateX(-50%)' });
+  });
+
+  test('applies correct transform style for 100% progress', () => {
+    const { container } = render(<Progress value={100} max={100} />);
+    const indicator = container.querySelector('.ds-progress__indicator') as HTMLElement;
+    expect(indicator).toHaveStyle({ transform: 'translateX(-0%)' });
+  });
+
+  test('applies correct transform style for 25% progress', () => {
+    const { container } = render(<Progress value={25} max={100} />);
+    const indicator = container.querySelector('.ds-progress__indicator') as HTMLElement;
+    expect(indicator).toHaveStyle({ transform: 'translateX(-75%)' });
+  });
+
+  test('applies correct transform style for 75% progress', () => {
+    const { container } = render(<Progress value={75} max={100} />);
+    const indicator = container.querySelector('.ds-progress__indicator') as HTMLElement;
+    expect(indicator).toHaveStyle({ transform: 'translateX(-25%)' });
+  });
+
+  test('handles custom max value correctly', () => {
+    const { container } = render(<Progress value={30} max={200} />);
+    const indicator = container.querySelector('.ds-progress__indicator') as HTMLElement;
+    // 30/200 = 15% progress, so translateX should be -85%
+    expect(indicator).toHaveStyle({ transform: 'translateX(-85%)' });
+  });
+
+  test('calculates percentage correctly with custom max', () => {
+    const { container } = render(<Progress value={25} max={50} />);
+    const indicator = container.querySelector('.ds-progress__indicator') as HTMLElement;
+    // 25/50 = 50% progress, so translateX should be -50%
+    expect(indicator).toHaveStyle({ transform: 'translateX(-50%)' });
+  });
+
+  test('passes through value and max props to Radix component', () => {
+    const { container } = render(<Progress value={60} max={100} />);
+    const progressRoot = container.querySelector('.ds-progress');
+    expect(progressRoot).toHaveAttribute('data-value', '60');
+    expect(progressRoot).toHaveAttribute('data-max', '100');
+  });
+
+  test('uses default value of 0 when not provided', () => {
+    const { container } = render(<Progress max={100} />);
+    const progressRoot = container.querySelector('.ds-progress');
+    expect(progressRoot).toHaveAttribute('data-value', '0');
+  });
+
+  test('uses default max of 100 when not provided', () => {
+    const { container } = render(<Progress value={50} />);
+    const progressRoot = container.querySelector('.ds-progress');
+    expect(progressRoot).toHaveAttribute('data-max', '100');
+  });
+
+  test('applies additional props to root element', () => {
+    const { container } = render(<Progress value={50} data-testid="custom-progress" />);
+    const progressRoot = container.querySelector('[data-testid="custom-progress"]');
+    expect(progressRoot).toBeInTheDocument();
+    expect(progressRoot).toHaveClass('ds-progress');
+  });
+});

package/src/components/progress/Progress.tsx

@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+import { Progress as RadixProgress } from 'radix-ui';
+
+export type ProgressProps = RadixProgress.ProgressProps & {
+  indicatorClassName?: string;
+};
+
+export const Progress = (props: ProgressProps) => {
+  const { value = 0, max = 100, className = '', indicatorClassName = '', ...rest } = props;
+  const percentage = (Number(value) / max) * 100;
+  return (
+    <RadixProgress.Root value={value} max={max} {...rest} className={classNames('ds-progress', className)}>
+      <RadixProgress.Indicator style={{ transform: `translateX(-${100 - percentage}%)` }} className={classNames('ds-progress__indicator', indicatorClassName)} />
+    </RadixProgress.Root>
+  );
+};

package/src/components/progress/progress.scss

@@ -0,0 +1,13 @@
+.ds-progress {
+  width: 100%;
+  height: var(--spacing-small);
+  background-color: var(--color-grey-100);
+  overflow: hidden;
+  border-radius: var(--border-radius-large);
+
+  &__indicator {
+    height: 100%;
+    background-color: var(--color-brand-600);
+    border-radius: var(--border-radius-large);
+  }
+}

package/src/components/searchBar/searchBar.scss

@@ -50,9 +50,6 @@
 
     &__placeholder {
       color: var(--search-global-default-color-text);
-      font-family: var(--type-body-p-family);
-      font-size: var(--type-body-p-size);
-      font-weight: var(--type-body-p-weight);
     }
 
     &-icon-only {

package/src/components/table/columnFilters/columnFilters.scss

@@ -43,9 +43,6 @@
     border: var(--border-weight) solid var(--color-grey-200);
     border-radius: var(--border-radius-small);
     color: var(--color-grey-900);
-    font-family: var(--font-family-standard);
-    font-size: var(--font-size-2-13);
-    font-weight: var(--font-weight-regular);
     padding: 0 var(--spacing-small);
     justify-content: space-between;
 }
@@ -59,9 +56,6 @@
     border: var(--border-weight) solid var(--color-grey-200);
     border-radius: var(--border-radius-small);
     color: var(--color-grey-900);
-    font-family: var(--font-family-standard);
-    font-size: var(--font-size-2-13);
-    font-weight: var(--font-weight-regular);
     box-sizing: border-box;
 
     &::-webkit-calendar-picker-indicator {

package/src/components/table/pagination/pagination.scss

@@ -20,7 +20,3 @@
         width: 39px;
     }
 }
-
-.ds-table__pagination-controls, .ds-table__row-count-info {
-    font-size: var(--font-size-2-13);
-}

package/src/components/tabs/tabs.scss

@@ -4,7 +4,6 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  font-family: var(--type-body-p-family);
   align-items: center;
   justify-content: flex-start;
   gap: var(--tabs-spacing-horizontal-gap);
@@ -21,7 +20,6 @@
 .ds-tabs-item__tab {
   min-width: var(--size-control-xlarge);
   position: relative;
-  font-family: var(--type-body-p-family);
   padding: var(--tabs-tab-item-spacing-vertical) var(--tabs-tab-item-spacing-horizontal);
   cursor: pointer;
   display: flex;

package/src/components/tag/tag.scss

@@ -8,10 +8,7 @@
   width: fit-content;
 
   /* 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 */
 
   &--neutral {

package/src/components/toast/Toast.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Toast, type ToastProps } from './Toast';
+import { useState } from 'react';
+import { Button } from 'Components/button/Button';
+
+const meta: Meta<typeof Toast> = {
+  tags: ['autodocs'],
+  title: 'Components/Toast',
+  component: Toast,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Toasts must have a Toast.Provider somewhere in its parent tree. A Toast.Viewport is also required inside the same provider as it is the element the toasts are rendered into. This uses the Radix Toast component, see https://www.radix-ui.com/primitives/docs/components/toast for more information.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['information', 'success', 'warning', 'danger'],
+      description: 'Toast variant',
+    },
+  },
+};
+
+type Story = StoryObj<typeof Toast>;
+
+const ToastWrapper = (args: ToastProps) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Toast.Provider>
+      <Button onClick={() => setOpen(true)}>Open Toast</Button>
+      <Toast {...args} open={open} onOpenChange={setOpen} />
+      <Toast.Viewport />
+    </Toast.Provider>
+  );
+};
+
+export const Information: Story = {
+  args: {
+    variant: 'information',
+    children: 'This is an information message',
+  },
+  render: ToastWrapper,
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'Your changes have been saved successfully!',
+  },
+  render: ToastWrapper,
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'Please review your changes before proceeding',
+  },
+  render: ToastWrapper,
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    children: 'An error occurred while processing your request',
+  },
+  render: ToastWrapper,
+};
+
+export const LongContent: Story = {
+  args: {
+    variant: 'information',
+    children:
+      'This is a much longer toast message that demonstrates how the component handles extended content. It should wrap appropriately and maintain readability.',
+  },
+  render: ToastWrapper,
+};
+
+export const MultipleToasts: Story = {
+  render: () => {
+    const [infoOpen, setInfoOpen] = useState(false);
+    const [successOpen, setSuccessOpen] = useState(false);
+    const [warningOpen, setWarningOpen] = useState(false);
+    const [dangerOpen, setDangerOpen] = useState(false);
+
+    return (
+      <Toast.Provider>
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+          <Button onClick={() => setInfoOpen(true)}>Open Info</Button>
+          <Button onClick={() => setSuccessOpen(true)}>Open Success</Button>
+          <Button onClick={() => setWarningOpen(true)}>Open Warning</Button>
+          <Button onClick={() => setDangerOpen(true)}>Open Danger</Button>
+        </div>
+        <Toast variant="information" open={infoOpen} onOpenChange={setInfoOpen}>
+          Information message
+        </Toast>
+        <Toast variant="success" open={successOpen} onOpenChange={setSuccessOpen}>
+          Success message
+        </Toast>
+        <Toast variant="warning" open={warningOpen} onOpenChange={setWarningOpen}>
+          Warning message
+        </Toast>
+        <Toast variant="danger" open={dangerOpen} onOpenChange={setDangerOpen}>
+          Error message
+        </Toast>
+        <Toast.Viewport />
+      </Toast.Provider>
+    );
+  },
+};
+
+export default meta;

package/src/components/toast/Toast.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Toast } from './Toast';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+
+describe('Toast', () => {
+  const renderToast = (props = {}) => {
+    return render(
+      <Toast.Provider>
+        <Toast open={true} {...props}>
+          Test message
+        </Toast>
+        <Toast.Viewport />
+      </Toast.Provider>,
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders the toast with content', () => {
+      renderToast();
+      expect(screen.getByText('Test message')).toBeInTheDocument();
+    });
+
+    it('renders with information variant by default', () => {
+      const { container } = renderToast();
+      const toast = container.querySelector('.ds-toast--information');
+      expect(toast).toBeInTheDocument();
+    });
+
+    it('renders with the correct class for each variant', () => {
+      const variants = ['information', 'danger', 'success', 'warning'] as const;
+
+      variants.forEach((variant) => {
+        const { container, unmount } = renderToast({ variant });
+        const toast = container.querySelector(`.ds-toast--${variant}`);
+        expect(toast).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('icons', () => {
+    it('renders info icon for information variant', () => {
+      const { container } = renderToast({ variant: 'information' });
+      expect(container.querySelector('.ds-icon-info')).toBeInTheDocument();
+    });
+
+    it('renders circle-alert icon for danger variant', () => {
+      const { container } = renderToast({ variant: 'danger' });
+      expect(container.querySelector('.ds-icon-circle-alert')).toBeInTheDocument();
+    });
+
+    it('renders circle-check icon for success variant', () => {
+      const { container } = renderToast({ variant: 'success' });
+      expect(container.querySelector('.ds-icon-circle-check')).toBeInTheDocument();
+    });
+
+    it('renders triangle-alert icon for warning variant', () => {
+      const { container } = renderToast({ variant: 'warning' });
+      expect(container.querySelector('.ds-icon-triangle-alert')).toBeInTheDocument();
+    });
+
+    it('renders close icon with screen reader text', () => {
+      renderToast();
+      expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+  });
+
+  describe('interactions', () => {
+    it('calls onOpenChange when close button is clicked', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+
+      render(
+        <Toast.Provider>
+          <Toast open={true} onOpenChange={onOpenChange}>
+            Test message
+          </Toast>
+          <Toast.Viewport />
+        </Toast.Provider>,
+      );
+
+      const closeButton = screen.getByRole('button');
+      await user.click(closeButton);
+
+      expect(onOpenChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('Provider and Viewport', () => {
+    it('exposes Provider component', () => {
+      expect(Toast.Provider).toBeDefined();
+    });
+
+    it('exposes Viewport component', () => {
+      expect(Toast.Viewport).toBeDefined();
+    });
+  });
+
+  describe('custom props', () => {
+    it('passes through additional props to Root', () => {
+      const { container } = renderToast({
+        'data-testid': 'custom-toast',
+      });
+
+      const toast = container.querySelector('[data-testid="custom-toast"]');
+      expect(toast).toBeInTheDocument();
+    });
+
+    it('applies custom className alongside default classes', () => {
+      renderToast();
+      const { container } = render(
+        <Toast.Provider>
+          <Toast open={true} variant="success">
+            Success message
+          </Toast>
+          <Toast.Viewport />
+        </Toast.Provider>,
+      );
+
+      const toast = container.querySelector('.ds-toast.ds-toast--success');
+      expect(toast).toBeInTheDocument();
+    });
+  });
+});

package/src/components/toast/Toast.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { Toast as RadixToast } from 'radix-ui';
+import { ToastViewport } from './ToastViewport';
+import { Icon } from 'Components/icon/Icon';
+
+export type ToastProps = RadixToast.ToastProps & {
+  variant?: 'information' | 'danger' | 'success' | 'warning';
+};
+
+export const Toast = (props: ToastProps) => {
+  const { children, variant = 'information', ...rest } = props;
+  const classes = classNames('ds-toast', `ds-toast--${variant}`);
+
+  const iconName = {
+    information: 'info',
+    danger: 'circle-alert',
+    success: 'circle-check',
+    warning: 'triangle-alert',
+  } as const;
+
+  const icon = iconName[variant];
+
+  return (
+    <RadixToast.Root {...rest} className={classes}>
+      <Icon className="ds-toast__icon" name={icon} />
+      <RadixToast.Title className="ds-toast__title">{children}</RadixToast.Title>
+      <RadixToast.Close className="ds-toast__close ds-button ds-button--secondary ds-button--icon-only ds-button--borderless">
+        <Icon name="x" screenReaderText="Close" />
+      </RadixToast.Close>
+    </RadixToast.Root>
+  );
+};
+
+Toast.Provider = RadixToast.Provider;
+Toast.Viewport = ToastViewport;

package/src/components/toast/ToastViewport.tsx

@@ -0,0 +1,6 @@
+import classNames from 'classnames';
+import { Toast } from 'radix-ui';
+
+export const ToastViewport = ({ className, ...rest }: Toast.ToastViewportProps) => (
+  <Toast.Viewport className={classNames('ds-toast__viewport', className)} {...rest} />
+);

package/src/components/toast/toast.scss

@@ -0,0 +1,79 @@
+.ds-toast__viewport {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    top: 0;
+    right: 0;
+    position: fixed;
+}
+
+.ds-toast {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: var(--border-weight) solid;
+    gap: var(--toast-spacing-gap);
+    padding: var(--toast-spacing-padding);
+    border-radius: var(--toast-radius);
+    box-shadow: var(--shadow-small);
+    font-family: var(--type-body-bold-family);
+    font-style: normal;
+    font-weight: var(--type-body-bold-weight);
+    line-height: var(--line-height-default); 
+    max-width: var(--toast-max-width);
+
+    &__icon {
+        flex-shrink: 0;
+    }
+
+    &__close {
+        flex-shrink: 0;
+        background-color: transparent;
+        border: none;
+        color: currentColor;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        
+    }
+
+    &--information {
+        border-color: var(--toast-info-color-border);
+        background-color: var(--toast-info-color-background);
+        color: var(--toast-info-color-text);
+
+        .ds-toast__close:hover {
+            background: var(--toast-info-icon-hover-color-background);
+        }
+    }
+
+    &--danger {
+        border-color: var(--toast-destructive-color-border);
+        background-color: var(--toast-destructive-color-background);
+        color: var(--toast-destructive-color-text);
+
+        .ds-toast__close:hover {
+            background: var(--toast-destructive-icon-hover-color-background);
+        }
+    }
+
+    &--success {
+        border-color: var(--toast-success-color-border);
+        background-color: var(--toast-success-color-background);
+        color: var(--toast-success-color-text);
+
+        .ds-toast__close:hover {
+            background: var(--toast-success-icon-hover-color-background);
+        }
+    }
+
+    &--warning {
+        border-color: var(--toast-warning-color-border);
+        background-color: var(--toast-warning-color-background);
+        color: var(--toast-warning-color-text);
+
+        .ds-toast__close:hover {
+            background: var(--toast-warning-icon-hover-color-background);
+        }
+    }
+}

package/src/components/tooltip/tooltip.scss

@@ -4,9 +4,6 @@
         background: var(--tooltip-color-background);
         padding: var(--tooltip-spacing-vertical) var(--tooltip-spacing-horizontal);
         border-radius: var(--border-radius-small);
-        font-size: var(--type-body-p-size);
-        font-family: var(--type-body-p-family);
-        font-weight: var(--type-body-p-weight);
 
         &-arrow {
             fill: var(--tooltip-color-background);

package/src/global.scss

@@ -24,5 +24,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  font-family: var(--font-family-standard);
+}
+
+body {
+  *[class^='ds-'], *[class*=' ds-'] {
+    font-family: var(--font-family-standard);
+    font-size: var(--type-body-p-size);
+    font-weight: var(--font-weight-regular);
+    box-sizing: border-box;
+  }
 }

package/src/index.scss

@@ -28,4 +28,8 @@
 @use "components/modal/modal.scss";
 @use "components/modal/modalManager/modalManager.scss";
 @use "components/table/columnFilters/columnFilters.scss";
+@use "components/banner/banner.scss";
+@use "components/editableText/editableText.scss";
+@use "components/progress/progress.scss";
+@use "components/toast/toast.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

@@ -26,3 +26,7 @@ export { Modal } from 'Components/modal/Modal';
 export { ModalManager } from 'Components/modal/modalManager/ModalManager';
 export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
 export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { Banner, type BannerProps, BANNER_LEVEL } from 'Components/banner/Banner';
+export { EditableText } from 'Components/editableText/EditableText';
+export { Progress } from 'Components/progress/Progress';
+export { Toast } from 'Components/toast/Toast';

package/src/tokens.scss

@@ -25,6 +25,7 @@
   --size-control-medium: 3rem;
   --size-control-large: 4rem;
   --size-control-xlarge: 5rem;
+  --shadow-small: 0 4px 12px 0 rgba(32, 32, 32, 0.08);
   --page-sign-in-color-background: #fffcf8;
   --color-grey-100: #efefef;
   --color-grey-200: #dfdfdf;
@@ -334,6 +335,7 @@
   --modal-radius: var(--border-radius-small);
   --modal-color-background: var(--color-grey-050);
   --modal-min-width: 37.5rem;
+  --toast-max-width: 360px;
   --toast-info-icon-hover-color-background: var(--color-semantic-info-100);
   --toast-info-icon-color-icon: var(--color-semantic-info-800);
   --toast-info-color-text: var(--color-semantic-info-800);