@arbor-education/design-system.components 0.1.0 → 0.1.2

package/src/components/table/pagination/PaginationControls.tsx

@@ -0,0 +1,116 @@
+import { Button } from 'Components/button/Button';
+import { NumberInput } from 'Components/formField/inputs/number/NumberInput';
+import { useEffect, useState } from 'react';
+import { useGridApi } from 'Utils/hooks/useGridApi';
+
+export type PaginationControlsProps = {
+  onPageChange?: (newPage: number) => void;
+  totalPages?: number;
+};
+
+export const PaginationControls = (props: PaginationControlsProps) => {
+  const { onPageChange, totalPages: passedTotalPages } = props;
+  const { gridApi, isGridApiReady } = useGridApi();
+  const [inputValue, setInputValue] = useState(1);
+
+  // default to 1, because no content is still one page
+  const [totalPages, setTotalPages] = useState(() => passedTotalPages ?? gridApi?.paginationGetTotalPages() ?? 1);
+
+  useEffect(() => {
+    if (isGridApiReady && !passedTotalPages) {
+      gridApi?.addEventListener('paginationChanged', () => {
+        const newPageCount = gridApi.paginationGetTotalPages();
+        if (newPageCount) {
+          setTotalPages(newPageCount);
+        }
+      });
+    }
+  }, [isGridApiReady]);
+
+  useEffect(() => {
+    if (passedTotalPages) {
+      setTotalPages(passedTotalPages);
+    }
+  }, [passedTotalPages]);
+
+  const goToPage = (page: number) => {
+    if (page === inputValue) {
+      return;
+    }
+    const pageZeroIndexed = page - 1;
+    if (onPageChange) {
+      onPageChange(pageZeroIndexed);
+    }
+    else {
+      gridApi?.paginationGoToPage(pageZeroIndexed);
+    }
+    setInputValue(page);
+  };
+
+  return (
+    <div className="ds-table__pagination-controls">
+      <Button
+        variant="secondary"
+        borderless
+        size="S"
+        color="black"
+        iconLeftName="chevrons-left"
+        iconLeftScreenReaderText="Go to first page"
+        onClick={() => goToPage(1)}
+        disabled={inputValue === 1}
+      />
+      <Button
+        variant="secondary"
+        borderless
+        size="S"
+        color="black"
+        iconLeftName="chevron-left"
+        onClick={() => goToPage(inputValue - 1)}
+        iconLeftScreenReaderText="Go to previous page"
+        disabled={inputValue === 1}
+      />
+      <span>
+        Page
+        {' '}
+        <NumberInput
+          value={inputValue}
+          onChange={(e) => {
+            const newPage = Number(e.currentTarget.value);
+            if (newPage > 0) {
+              goToPage(newPage);
+            }
+          }}
+          max={totalPages}
+          min={1}
+          disableSpinners
+          containerClassName="ds-table__pagination-controls__number-input-container"
+          className="ds-table__pagination-controls__number-input"
+          aria-label="Current page"
+          aria-current="page"
+        />
+        {' '}
+        of
+        {' '}
+        {totalPages}
+      </span>
+      <Button
+        variant="secondary"
+        borderless
+        color="black"
+        iconLeftName="chevron-right"
+        onClick={() => goToPage(inputValue + 1)}
+        disabled={inputValue === totalPages}
+        iconLeftScreenReaderText="Go to next page"
+      />
+      <Button
+        variant="secondary"
+        borderless
+        color="black"
+        iconLeftName="chevrons-right"
+        onClick={() => goToPage(totalPages)}
+        disabled={inputValue === totalPages}
+        iconLeftScreenReaderText="Go to last page"
+      />
+    </div>
+  );
+};

package/src/components/table/pagination/PaginationPanel.tsx

@@ -0,0 +1,30 @@
+import { PageSizeSelector, type PageSizeSelectorProps } from './PageSizeSelector';
+import { RowCountInfo, type RowCountInfoProps } from './RowCountInfo';
+import { PaginationControls, type PaginationControlsProps } from './PaginationControls';
+import classNames from 'classnames';
+
+type PaginationPanelProps = {
+  className?: string;
+} & RowCountInfoProps & PaginationControlsProps & PageSizeSelectorProps;
+
+export const PaginationPanel = (props: PaginationPanelProps) => {
+  const {
+    className = '',
+    totalRows,
+    totalPages,
+    onPageChange,
+    availableSizes,
+    initialPageSize,
+    onPageSizeChange,
+  } = props;
+
+  const classes = classNames('ds-table__pagination-panel', className);
+
+  return (
+    <nav className={classes} aria-label="Pagination">
+      <RowCountInfo totalRows={totalRows} />
+      <PaginationControls totalPages={totalPages} onPageChange={onPageChange} />
+      <PageSizeSelector availableSizes={availableSizes} initialPageSize={initialPageSize} onPageSizeChange={onPageSizeChange} />
+    </nav>
+  );
+};

package/src/components/table/pagination/RowCountInfo.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { useGridApi } from 'Utils/hooks/useGridApi';
+
+export type RowCountInfoProps = {
+  totalRows?: number;
+};
+
+export const RowCountInfo = (props: RowCountInfoProps) => {
+  const { totalRows: passedTotalRows } = props;
+
+  const { gridApi, isGridApiReady } = useGridApi();
+
+  const getTrueDisplayedRowCount = () => {
+    const displayedRowCount = gridApi?.getDisplayedRowCount() || 0;
+    const pageSize = gridApi?.paginationGetPageSize() || 0;
+    const result = Math.min(displayedRowCount, pageSize);
+    const currentPage = gridApi?.paginationGetCurrentPage() || 0;
+    const totalPages = gridApi?.paginationGetTotalPages();
+
+    if (totalPages === 1) {
+      return displayedRowCount;
+    }
+    if (gridApi && displayedRowCount && pageSize && currentPage + 1 === totalPages) {
+      return displayedRowCount % pageSize || pageSize;
+    }
+    return result;
+  };
+  const [displayedRowCount, setDisplayedRowCount] = useState(() => getTrueDisplayedRowCount());
+
+  useEffect(() => {
+    if (isGridApiReady) {
+      const result = getTrueDisplayedRowCount();
+      setDisplayedRowCount(result);
+    }
+  }, [isGridApiReady]);
+
+  if (!isGridApiReady) {
+    return null;
+  }
+
+  // TODO when writing tests, see how this behaves with or without pagination
+  let totalRows: number | undefined;
+  if (typeof passedTotalRows !== 'undefined') {
+    totalRows = passedTotalRows;
+  }
+  else if (gridApi && gridApi.paginationGetTotalPages() > 1) {
+    totalRows = gridApi.paginationGetRowCount();
+  }
+
+  gridApi?.addEventListener('paginationChanged', () => {
+    setDisplayedRowCount(getTrueDisplayedRowCount());
+  });
+  gridApi?.addEventListener('filterChanged', () => {
+    setDisplayedRowCount(getTrueDisplayedRowCount());
+  });
+  gridApi?.addEventListener('rowDataUpdated', () => {
+    setDisplayedRowCount(getTrueDisplayedRowCount());
+  });
+
+  const message = totalRows && totalRows !== displayedRowCount
+    ? `Showing ${displayedRowCount} of ${totalRows} results`
+    : `Showing ${displayedRowCount} results`;
+
+  return (
+    <span className="ds-table__row-count-info">{message}</span>
+  );
+};

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

@@ -0,0 +1,26 @@
+.ds-table__pagination-panel {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.ds-table__pagination-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3px;
+
+    &__number-input-container {
+        display: inline;
+    }
+
+    &__number-input {
+        width: 39px;
+    }
+}
+
+.ds-table__pagination-controls, .ds-table__row-count-info {
+    font-size: var(--font-size-2-13);
+}

package/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta } from '@storybook/react-vite';
+import { Tooltip } from './Tooltip';
+import { Button } from 'Components/button/Button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip/DestructuredTooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'A composable set of components (Tooltip, Tooltip.Trigger, Tooltip.Content) that you can use to create a tooltip.',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    children: [
+      <>
+        <Tooltip.Trigger>
+          <Button type="primary">Click me!</Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content>
+          <div>Content</div>
+        </Tooltip.Content>
+      </>,
+    ],
+  },
+};
+
+export default meta;

package/src/components/tooltip/Tooltip.test.tsx

@@ -0,0 +1,44 @@
+import { expect, test, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { Tooltip } from './Tooltip';
+import userEvent from '@testing-library/user-event';
+
+describe('Tooltip component', () => {
+  test('renders tooltip trigger', () => {
+    render(
+      <Tooltip>
+        <Tooltip.Trigger>
+          <button>Hover me</button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          Tooltip content
+        </Tooltip.Content>
+      </Tooltip>,
+    );
+
+    expect(screen.getByText('Hover me')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveClass('ds-tooltip__trigger');
+  });
+
+  test('shows tooltip on hover', async () => {
+    render(
+      <Tooltip delayDuration={0}>
+        <Tooltip.Trigger>
+          <button>Hover me</button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          Tooltip content
+        </Tooltip.Content>
+      </Tooltip>,
+    );
+
+    await userEvent.hover(screen.getByText('Hover me'));
+    await expect(screen.getAllByText('Tooltip content')[0]).toBeInTheDocument();
+  });
+
+  test('exposes Content and Trigger as static properties', () => {
+    expect(Tooltip.Content).toBeDefined();
+    expect(Tooltip.Trigger).toBeDefined();
+  });
+});

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import { TooltipContent } from './TooltipContent';
+import { TooltipTrigger } from './TooltipTrigger';
+
+export const Tooltip = (props: TooltipPrimitive.TooltipProps) => {
+  const { children, delayDuration = 400, ...rest } = props;
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={delayDuration} {...rest}>
+        {children}
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+
+  );
+};
+
+Tooltip.Content = TooltipContent;
+Tooltip.Trigger = TooltipTrigger;

package/src/components/tooltip/TooltipContent.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import { useContext } from 'react';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+export type TooltipContentProps = {
+  children: React.ReactNode;
+  portalProps?: TooltipPrimitive.TooltipPortalProps;
+  shouldShowArrow?: boolean;
+} & TooltipPrimitive.TooltipContentProps;
+
+export const TooltipContent = (props: TooltipContentProps) => {
+  const {
+    children,
+    portalProps,
+    shouldShowArrow = true,
+    className,
+    ...rest
+  } = props;
+  const popupParentRef = useContext(PopupParentContext);
+
+  return (
+    <TooltipPrimitive.Portal
+      container={popupParentRef.current}
+      {...portalProps}
+    >
+      <TooltipPrimitive.Content
+        {...rest}
+        className={classNames('ds-tooltip__content', className)}
+      >
+        {shouldShowArrow && (
+          <TooltipPrimitive.Arrow
+            className="ds-tooltip__content-arrow"
+          />
+        )}
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+};

package/src/components/tooltip/TooltipTrigger.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+export const TooltipTrigger = (props: TooltipPrimitive.TooltipTriggerProps) => {
+  const { children, className = '', ...rest } = props;
+  return (
+    <TooltipPrimitive.Trigger asChild className={classNames('ds-tooltip__trigger', className)} {...rest}>
+      {children}
+    </TooltipPrimitive.Trigger>
+  );
+};

package/src/components/tooltip/TooltipWrapper.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/react-vite';
+import { Button } from 'Components/button/Button';
+import { TooltipWrapper as TooltipWrapperComponent } from './TooltipWrapper';
+
+const meta: Meta<typeof TooltipWrapperComponent> = {
+  title: 'Components/Tooltip/TooltipWrapper',
+  component: TooltipWrapperComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Instead of manually creating a tooltip (using Tooltip, Tooltip.TooltipTrigger, Tooltip.TooltipContent), you can use this wrapper to easily create a tooltip.',
+      },
+    } },
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    tooltipContent: 'Tooltip content',
+    children: <Button type="primary">Click me!</Button>,
+  },
+};
+
+export default meta;

package/src/components/tooltip/TooltipWrapper.test.tsx

@@ -0,0 +1,100 @@
+import { expect, test, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { TooltipWrapper } from './TooltipWrapper';
+import userEvent from '@testing-library/user-event';
+
+describe('TooltipWrapper component', () => {
+  test('renders children with tooltip wrapper', () => {
+    render(
+      <TooltipWrapper tooltipContent="Helpful tooltip text">
+        <button>Click me</button>
+      </TooltipWrapper>,
+    );
+
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveClass('ds-tooltip__trigger');
+  });
+
+  test('accepts string tooltip content', () => {
+    render(
+      <TooltipWrapper tooltipContent="Tooltip text">
+        <button>Button</button>
+      </TooltipWrapper>,
+    );
+
+    expect(screen.getByText('Button')).toBeInTheDocument();
+  });
+
+  test('accepts JSX tooltip content', () => {
+    render(
+      <TooltipWrapper
+        tooltipContent={(
+          <div>
+            <strong>Bold text</strong>
+          </div>
+        )}
+      >
+        <button>Button</button>
+      </TooltipWrapper>,
+    );
+
+    expect(screen.getByText('Button')).toBeInTheDocument();
+  });
+
+  test('passes triggerProps to trigger', () => {
+    render(
+      <TooltipWrapper
+        tooltipContent="Tooltip text"
+        triggerProps={{ className: 'foobar' }}
+      >
+        <button>Tooltip trigger</button>
+      </TooltipWrapper>,
+    );
+
+    expect(screen.getByText('Tooltip trigger')).toBeInTheDocument();
+    expect(screen.getByText('Tooltip trigger')).toHaveClass('foobar');
+  });
+
+  test('shows tooltip on hover', async () => {
+    render(
+      <TooltipWrapper
+        tooltipContent="Tooltip text"
+        delayDuration={0}
+      >
+        <button>Tooltip trigger</button>
+      </TooltipWrapper>,
+    );
+
+    await userEvent.hover(screen.getByText('Tooltip trigger'));
+    await expect(screen.getAllByText('Tooltip text')[0]).toBeInTheDocument();
+  });
+
+  test('passes contentProps to content', async () => {
+    render(
+      <TooltipWrapper
+        tooltipContent="Tooltip text"
+        contentProps={{ className: 'foobar', shouldShowArrow: false }}
+        delayDuration={0}
+      >
+        <button>Tooltip trigger</button>
+      </TooltipWrapper>,
+    );
+
+    await userEvent.hover(screen.getByText('Tooltip trigger'));
+    await expect(screen.getAllByText('Tooltip text')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Tooltip text')[0]).toHaveClass('foobar');
+  });
+
+  test('renders with complex children', () => {
+    render(
+      <TooltipWrapper tooltipContent="Info">
+        <div className="wrapper">
+          <span>Content</span>
+        </div>
+      </TooltipWrapper>,
+    );
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+});

package/src/components/tooltip/TooltipWrapper.tsx

@@ -0,0 +1,32 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import { Tooltip } from './Tooltip';
+import type { TooltipContentProps } from './TooltipContent';
+
+export type TooltipWrapperProps = {
+  children: TooltipPrimitive.TooltipTriggerProps['children'];
+  tooltipContent: TooltipPrimitive.TooltipContentProps['children'];
+  triggerProps?: TooltipPrimitive.TooltipTriggerProps;
+  contentProps?: Omit<TooltipContentProps, 'children'>;
+  delayDuration?: number;
+};
+
+export const TooltipWrapper = (props: TooltipWrapperProps) => {
+  const {
+    children,
+    tooltipContent,
+    triggerProps,
+    contentProps,
+    delayDuration = 400,
+  } = props;
+
+  return (
+    <Tooltip delayDuration={delayDuration}>
+      <Tooltip.Trigger {...triggerProps}>
+        {children}
+      </Tooltip.Trigger>
+      <Tooltip.Content {...contentProps}>
+        {tooltipContent}
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/components/tooltip/tooltip.scss

@@ -0,0 +1,15 @@
+.ds-tooltip {
+    &__content {
+        color: var(--tooltip-color-text);
+        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/index.scss

@@ -18,4 +18,6 @@
 @use "./components/slideoverManager/slideoverManager.scss";
 @use "./components/slideover/slideover.scss";
 @use "./components/table/table.scss";
+@use "./components/table/pagination/pagination.scss";
+@use "./components/tooltip/tooltip.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

@@ -16,3 +16,5 @@ export { SlideoverUtils } from 'Utils/SlideoverUtils';
 export { RadioButtonInput } from 'Components/formField/inputs/radio/RadioButtonInput';
 export { Table } from 'Components/table/Table';
 export { GridApiContext } from 'Components/table/GridApiContext';
+export { Tooltip } from 'Components/tooltip/Tooltip';
+export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';

package/src/utils/hooks/useGridApi.ts

@@ -0,0 +1,15 @@
+import { GridApiContext } from 'Components/table/GridApiContext';
+import { useContext, useEffect, useState } from 'react';
+
+export const useGridApi = () => {
+  const gridApi = useContext(GridApiContext);
+  const [isGridApiReady, setIsGridApiReady] = useState(false);
+
+  useEffect(() => {
+    if (gridApi) {
+      setIsGridApiReady(true);
+    }
+  }, [gridApi]);
+
+  return { gridApi, isGridApiReady };
+};

package/src/utils/hooks/useIsMounted.ts

@@ -0,0 +1,12 @@
+import { useRef } from 'react';
+import { useComponentDidMount } from './useComponentDidMount';
+
+export const useIsMounted = () => {
+  const isMounted = useRef(true);
+  useComponentDidMount(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return isMounted;
+};