@arbor-education/design-system.components 0.3.4 → 0.3.6

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,80 @@
+.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-size: var(--type-body-p-size);
+    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/index.scss

@@ -28,4 +28,7 @@
 @use "components/modal/modal.scss";
 @use "components/modal/modalManager/modalManager.scss";
 @use "components/table/columnFilters/columnFilters.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,6 @@ 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 { 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);