Merge pull request #274 from MetroStar/in-page-nav

Add In-Page Navigation Component to Comet USWDS

packages/comet-uswds/src/components/in-page-navigation/in-page-navigation.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { InPageNavigation } from '../../index';
+import { InPageNavigationProps } from './in-page-navigation';
+
+const meta: Meta<typeof InPageNavigation> = {
+  title: 'USWDS/In-Page Navigation',
+  component: InPageNavigation,
+  argTypes: {
+    id: { required: true },
+  },
+};
+export default meta;
+
+const content = `
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+    ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+    lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+    volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+    facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+    sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+    gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+    condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+    libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+    consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+    orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+    amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+    erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+    pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+    adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+    rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+    Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+    volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+    posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+    Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+    pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+    vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+    Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+    dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+    pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+    turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+    condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+    libero. Vivamus pharetra posuere sapien.
+`;
+
+const Template: StoryFn<typeof InPageNavigation> = (args: InPageNavigationProps) => (
+  <InPageNavigation {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'nav-1',
+  navTitle: 'On this page',
+  pageTitle: 'Sample in-page navigation page',
+  items: [
+    {
+      heading: 'Lorem ipsum dolor',
+      content: content,
+      headingType: 'h2',
+    },
+    {
+      heading: 'Consectetuer adipiscing elit',
+      content: content,
+      headingType: 'h2',
+    },
+    {
+      heading: 'Nullam sit amet enim',
+      content: content,
+      headingType: 'h3',
+    },
+    {
+      heading: 'Vivamus pharetra posuere sapien',
+      content: content,
+      headingType: 'h3',
+    },
+    {
+      heading: 'Suspendisse id velit',
+      content: content,
+      headingType: 'h2',
+    },
+  ],
+};

packages/comet-uswds/src/components/in-page-navigation/in-page-navigation.test.tsx

@@ -0,0 +1,60 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import InPageNavigation from './in-page-navigation';
+
+describe('InPageNavigation', () => {
+  beforeEach(() => {
+    // IntersectionObserver isn't available in test environment
+    const mockIntersectionObserver = vi.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    window.IntersectionObserver = mockIntersectionObserver;
+  });
+
+  test('should render with no accessibility violations', async () => {
+    const { container } = render(
+      <InPageNavigation
+        id="nav"
+        pageTitle="Page Title"
+        items={[{ heading: 'Heading 1', content: 'Content 1', headingType: 'h2' }]}
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  test('should render a default in-page navigation', async () => {
+    const { container } = render(
+      <InPageNavigation
+        id="nav"
+        pageTitle="Page Title"
+        items={[
+          { heading: 'Heading 1', content: 'Content 1', headingType: 'h2' },
+          { heading: 'Heading 2', content: 'Content 2', headingType: 'h2' },
+        ]}
+      />,
+    );
+    expect(container.querySelector('#nav')).toHaveClass('usa-in-page-nav-container');
+  });
+
+  test('should render with custom titles', async () => {
+    const { container } = render(
+      <InPageNavigation
+        id="nav"
+        pageTitle="Page Title"
+        navTitle="Navigation Title"
+        items={[
+          { heading: 'Heading 1', content: 'Content 1', headingType: 'h2' },
+          { heading: 'Heading 2', content: 'Content 2', headingType: 'h2' },
+        ]}
+      />,
+    );
+    expect(container.querySelector('#nav')).toHaveClass('usa-in-page-nav-container');
+    expect(container.querySelector('.usa-in-page-nav')).toHaveAttribute(
+      'data-title-text',
+      'Navigation Title',
+    );
+  });
+});

packages/comet-uswds/src/components/in-page-navigation/in-page-navigation.tsx

@@ -0,0 +1,73 @@
+import inPageNavigation from '@uswds/uswds/js/usa-in-page-navigation';
+import React, { ReactNode, useEffect, useRef } from 'react';
+
+export interface InPageNavigationItemProps {
+  heading: string;
+  headingType: 'h2' | 'h3';
+  content: ReactNode;
+}
+
+export interface InPageNavigationProps {
+  /**
+   * The unique identifier for this component
+   */
+  id: string;
+  /**
+   * The title of the page
+   */
+  pageTitle: string;
+  /**
+   * The title of the in-page navigation
+   */
+  navTitle?: string;
+  /**
+   * The list of navigation items to display
+   */
+  items: InPageNavigationItemProps[];
+}
+
+/**
+ * The in-page navigation allows navigation to specific sections on a lengthy content page.
+ */
+export const InPageNavigation = ({
+  id,
+  navTitle,
+  pageTitle,
+  items,
+}: InPageNavigationProps): React.ReactElement => {
+  // Ensure in-page navigation JS is loaded
+  const navRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const navElement = navRef.current;
+    inPageNavigation.on(navElement);
+
+    // Ensure cleanup after the effect
+    return () => {
+      inPageNavigation.off(navElement);
+    };
+  }, []);
+
+  return (
+    <div id={id} className="usa-in-page-nav-container" ref={navRef}>
+      <aside
+        className="usa-in-page-nav"
+        data-title-text={navTitle ? navTitle : 'On this page'}
+        data-title-heading-level="h4"
+        data-scroll-offset="0"
+        data-root-margin="0px 0px 0px 0px"
+        data-threshold="1"
+      ></aside>
+      <main id="main-content" className="main-content usa-prose">
+        <h1>{pageTitle}</h1>
+        {items.map((item, index) => (
+          <div key={`in-page-nav-item-${index}`}>
+            <item.headingType>{item.heading}</item.headingType>
+            <p>{item.content}</p>
+          </div>
+        ))}
+      </main>
+    </div>
+  );
+};
+
+export default InPageNavigation;

packages/comet-uswds/src/components/in-page-navigation/index.ts

@@ -0,0 +1,2 @@
+export { default } from './in-page-navigation';
+export type { InPageNavigationItemProps } from './in-page-navigation';

packages/comet-uswds/src/components/index.ts

@@ -20,6 +20,8 @@ export { default as Form } from './form';
 export { default as FormGroup } from './form-group';
 export { default as HelperText } from './helper-text';
 export { default as Icon } from './icon';
+export { default as InPageNavigation } from './in-page-navigation';
+export type { InPageNavigationItemProps } from './in-page-navigation';
 export { default as TextInput } from './text-input';
 export { default as Label } from './label';
 export { default as LanguageSelector } from './language-selector';

packages/comet-uswds/src/uswds/types.d.ts

@@ -8,6 +8,7 @@ declare module '@uswds/uswds/js/usa-date-range-picker';
 declare module '@uswds/uswds/js/usa-file-input';
 declare module '@uswds/uswds/js/usa-header';
 declare module '@uswds/uswds/js/usa-input-mask';
+declare module '@uswds/uswds/js/usa-in-page-navigation';
 declare module '@uswds/uswds/js/usa-language-selector';
 declare module '@uswds/uswds/js/usa-modal';
 declare module '@uswds/uswds/js/usa-nav';