@arbor-education/design-system.components 0.25.2 → 0.25.4

package/src/components/skeleton/Skeleton.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test } from 'vitest';
+import { Skeleton } from './Skeleton.js';
+
+describe('Skeleton', () => {
+  test('renders a skeleton placeholder by default', () => {
+    const { container } = render(<Skeleton />);
+    const el = container.firstChild as HTMLElement;
+    expect(el.tagName).toBe('SPAN');
+    expect(el).toHaveClass('ds-skeleton');
+    expect(el).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('renders children inside aria-hidden container while loading', () => {
+    const { container } = render(<Skeleton loading={true}>Loaded content</Skeleton>);
+    const skeleton = container.querySelector('.ds-skeleton') as HTMLElement;
+    expect(skeleton).toHaveAttribute('aria-hidden', 'true');
+    expect(skeleton).toHaveTextContent('Loaded content');
+  });
+
+  test('renders children when not loading', () => {
+    render(<Skeleton loading={false}>Loaded content</Skeleton>);
+    expect(screen.getByText('Loaded content')).toBeInTheDocument();
+  });
+
+  test('does not render skeleton element when not loading', () => {
+    const { container } = render(<Skeleton loading={false}>Loaded content</Skeleton>);
+    expect(container.querySelector('.ds-skeleton')).not.toBeInTheDocument();
+  });
+
+  test('applies width and height as inline styles', () => {
+    const { container } = render(<Skeleton width="200px" height="16px" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveStyle({ width: '200px', height: '16px' });
+  });
+
+  test('merges additional style with width and height', () => {
+    const { container } = render(<Skeleton width="100px" height="100px" style={{ borderRadius: '50%' }} />);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveStyle({ width: '100px', height: '100px', borderRadius: '50%' });
+  });
+
+  test('applies additional className', () => {
+    const { container } = render(<Skeleton className="custom-class" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveClass('ds-skeleton', 'custom-class');
+  });
+
+  test('passes through additional HTML attributes', () => {
+    const { container } = render(<Skeleton data-testid="my-skeleton" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveAttribute('data-testid', 'my-skeleton');
+  });
+});

package/src/components/skeleton/Skeleton.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+
+export type SkeletonProps = React.HTMLAttributes<HTMLSpanElement> & {
+  loading?: boolean;
+  width?: string | number;
+  height?: string | number;
+};
+
+export const Skeleton = ({
+  loading = true,
+  width,
+  height,
+  className,
+  style,
+  children,
+  ...props
+}: SkeletonProps): React.JSX.Element => {
+  if (!loading) {
+    return <>{children}</>;
+  }
+
+  return (
+    <span
+      {...props}
+      aria-hidden="true"
+      className={classNames('ds-skeleton', className)}
+      style={{ width, height, ...style }}
+    >
+      {children}
+    </span>
+  );
+};
+
+export namespace Skeleton {
+  export type Props = SkeletonProps;
+}

package/src/components/skeleton/skeleton.scss

@@ -0,0 +1,23 @@
+@keyframes ds-skeleton-shimmer {
+  from {
+    background-color: var(--color-grey-100);
+  }
+
+  to {
+    background-color: var(--color-grey-200);
+  }
+}
+
+.ds-skeleton {
+  display: inline-block;
+  border-radius: var(--border-radius-xsmall);
+  background-color: var(--color-grey-200);
+  animation: 1s infinite alternate-reverse ds-skeleton-shimmer;
+  color: transparent;
+  pointer-events: none;
+  user-select: none;
+
+  > * {
+    visibility: hidden;
+  }
+}

package/src/index.scss

@@ -1,6 +1,7 @@
 @use "../node_modules/react-day-picker/src/style.css";
 @use "./tokens.scss";
 @use "./global.scss";
+@use "components/breadcrumbs/breadcrumbs.scss";
 @use "components/button/button.scss";
 @use "components/icon/icon.scss";
 @use "components/iconText/iconText.scss";
@@ -57,6 +58,7 @@
 @use "components/dataViewCard/dataViewCard.scss";
 @use "components/treeRow/treeRow.scss";
 @use "components/sidebarNav/sidebarNav.scss";
+@use "components/skeleton/skeleton.scss";
 
 // stylelint-disable-next-line at-rule-disallowed-list -- plain CSS import (font face), exempt from Sass @import deprecation
 @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

@@ -3,6 +3,7 @@ export { Avatar } from 'Components/avatar/Avatar';
 export { AvatarGroup } from 'Components/avatarGroup/AvatarGroup';
 export { Badge } from 'Components/badge/Badge';
 export { Banner } from 'Components/banner/Banner';
+export { Breadcrumbs } from 'Components/breadcrumbs/Breadcrumbs';
 export { Button } from 'Components/button/Button';
 export { Card, type CardProps } from 'Components/card/Card';
 export { Combobox } from 'Components/combobox/Combobox';
@@ -30,6 +31,7 @@ export { NumberInput } from 'Components/formField/inputs/number/NumberInput';
 export { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
 export { RadioButtonInput } from 'Components/formField/inputs/radio/RadioButtonInput';
 export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
+export { Skeleton } from 'Components/skeleton/Skeleton';
 export { TextInput } from 'Components/formField/inputs/text/TextInput';
 export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
 export { TimeInput } from 'Components/formField/inputs/time/TimeInput';