@arbor-education/design-system.components 0.0.3 → 0.0.5

package/src/components/section/Section.test.tsx

@@ -0,0 +1,308 @@
+import { expect, test, describe, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Section } from './Section';
+import '@testing-library/jest-dom/vitest';
+
+describe('Section component', () => {
+  test('renders basic section with children', () => {
+    render(
+      <Section>
+        <p>Section content</p>
+      </Section>,
+    );
+
+    expect(screen.getByText('Section content')).toBeInTheDocument();
+  });
+
+  test('renders section with title', () => {
+    render(
+      <Section title="Test Section">
+        <p>Section content</p>
+      </Section>,
+    );
+
+    expect(screen.getByText('Test Section')).toBeInTheDocument();
+  });
+
+  test('renders section with title icon', () => {
+    render(
+      <Section title="Test Section" titleIconName="info" titleIconScreenReaderText="info icon">
+        <p>Section content</p>
+      </Section>,
+    );
+
+    expect(screen.getByText('Test Section')).toBeInTheDocument();
+    // Icon should be rendered within the heading
+    const heading = screen.getByText('info icon');
+    expect(heading).toBeInTheDocument();
+  });
+
+  test('renders section with button', () => {
+    const mockButtonClick = vi.fn();
+
+    render(
+      <Section
+        title="Test Section"
+        buttonText="Click Me"
+        buttonOnClick={mockButtonClick}
+        buttonType="primary"
+        buttonSize="M"
+      >
+        <p>Section content</p>
+      </Section>,
+    );
+
+    const button = screen.getByText('Click Me');
+    expect(button).toBeInTheDocument();
+
+    fireEvent.click(button);
+    expect(mockButtonClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('applies custom className', () => {
+    render(
+      <Section className="custom-section">
+        <p>Section content</p>
+      </Section>,
+    );
+
+    const section = screen.getByRole('region');
+    expect(section).toHaveClass('ds-section', 'custom-section');
+  });
+
+  describe('collapsible functionality', () => {
+    test('renders collapsible section with chevron icon', () => {
+      render(
+        <Section title="Collapsible Section" collapsible>
+          <p>Section content</p>
+        </Section>,
+      );
+
+      const section = screen.getByRole('region');
+      expect(section).toHaveClass('ds-section--collapsible');
+
+      // Should have chevron-up icon when not collapsed
+      expect(screen.getByText('Collapse section')).toBeInTheDocument();
+    });
+
+    test('toggles collapsed state when header is clicked', () => {
+      render(
+        <Section title="Collapsible Section" collapsible>
+          <p>Section content</p>
+        </Section>,
+      );
+
+      const heading = screen.getByRole('heading');
+      const contents = document.querySelector('.ds-section__contents');
+
+      // Initially not collapsed
+      expect(contents).not.toHaveClass('ds-section__contents--collapsed');
+
+      // Click to collapse
+      fireEvent.click(heading);
+      expect(contents).toHaveClass('ds-section__contents--collapsed');
+
+      // Click to expand
+      fireEvent.click(heading);
+      expect(contents).not.toHaveClass('ds-section__contents--collapsed');
+    });
+
+    test('starts collapsed when initially collapsed prop is true', () => {
+      render(
+        <Section title="Collapsible Section" collapsible collapsed>
+          <p>Section content</p>
+        </Section>,
+      );
+
+      const contents = document.querySelector('.ds-section__contents');
+      expect(contents).toHaveClass('ds-section__contents--collapsed');
+    });
+
+    test('heading has correct tabIndex for collapsible section', () => {
+      render(
+        <Section title="Collapsible Section" collapsible>
+          <p>Section content</p>
+        </Section>,
+      );
+
+      const heading = screen.getByRole('heading');
+      expect(heading).toHaveAttribute('tabIndex', '0');
+    });
+
+    test('heading has tabIndex -1 for non-collapsible section', () => {
+      render(
+        <Section title="Non-collapsible Section">
+          <p>Section content</p>
+        </Section>,
+      );
+
+      const heading = screen.getByRole('heading');
+      expect(heading).toHaveAttribute('tabIndex', '-1');
+    });
+
+    test('does not toggle when non-collapsible section header is clicked', () => {
+      render(
+        <Section title="Non-collapsible Section">
+          <p>Section content</p>
+        </Section>,
+      );
+
+      const heading = screen.getByRole('heading');
+      const contents = document.querySelector('.ds-section__contents');
+
+      // Initially not collapsed
+      expect(contents).not.toHaveClass('ds-section__contents--collapsed');
+
+      // Click should not change state
+      fireEvent.click(heading);
+      expect(contents).not.toHaveClass('ds-section__contents--collapsed');
+    });
+  });
+
+  describe('nested sections', () => {
+    test('renders nested sections correctly', () => {
+      render(
+        <Section title="Parent Section" collapsible>
+          <p>Parent content</p>
+          <Section title="Child Section 1" collapsible>
+            <p>Child 1 content</p>
+          </Section>
+          <Section title="Child Section 2">
+            <p>Child 2 content</p>
+            <Section title="Grandchild Section">
+              <p>Grandchild content</p>
+            </Section>
+          </Section>
+        </Section>,
+      );
+
+      // All titles should be present
+      expect(screen.getByText('Parent Section')).toBeInTheDocument();
+      expect(screen.getByText('Child Section 1')).toBeInTheDocument();
+      expect(screen.getByText('Child Section 2')).toBeInTheDocument();
+      expect(screen.getByText('Grandchild Section')).toBeInTheDocument();
+
+      // All content should be present
+      expect(screen.getByText('Parent content')).toBeInTheDocument();
+      expect(screen.getByText('Child 1 content')).toBeInTheDocument();
+      expect(screen.getByText('Child 2 content')).toBeInTheDocument();
+      expect(screen.getByText('Grandchild content')).toBeInTheDocument();
+
+      // Should have multiple sections
+      const sections = document.querySelectorAll('.ds-section');
+      expect(sections).toHaveLength(4);
+    });
+
+    test('nested sections can be collapsed independently', () => {
+      render(
+        <Section title="Parent Section" collapsible>
+          <p>Parent content</p>
+          <Section title="Child Section" collapsible>
+            <p>Child content</p>
+          </Section>
+        </Section>,
+      );
+
+      const allHeadings = screen.getAllByRole('heading');
+      const parentHeading = allHeadings[0];
+      const childHeading = allHeadings[1];
+
+      const allContents = document.querySelectorAll('.ds-section__contents');
+      const parentContents = allContents[0];
+      const childContents = allContents[1];
+
+      // Initially both expanded
+      expect(parentContents).not.toHaveClass('ds-section__contents--collapsed');
+      expect(childContents).not.toHaveClass('ds-section__contents--collapsed');
+
+      // Collapse child section
+      fireEvent.click(childHeading!);
+      expect(parentContents).not.toHaveClass('ds-section__contents--collapsed');
+      expect(childContents).toHaveClass('ds-section__contents--collapsed');
+
+      // Collapse parent section
+      fireEvent.click(parentHeading!);
+      expect(parentContents).toHaveClass('ds-section__contents--collapsed');
+      expect(childContents).toHaveClass('ds-section__contents--collapsed');
+
+      // Expand parent section (child should remain collapsed)
+      fireEvent.click(parentHeading!);
+      expect(parentContents).not.toHaveClass('ds-section__contents--collapsed');
+      expect(childContents).toHaveClass('ds-section__contents--collapsed');
+    });
+
+    test('nested sections with different configurations', () => {
+      const parentButtonClick = vi.fn();
+      const childButtonClick = vi.fn();
+
+      render(
+        <Section
+          title="Parent Section"
+          collapsible
+          buttonText="Parent Action"
+          buttonOnClick={parentButtonClick}
+          titleIconName="info"
+        >
+          <p>Parent content</p>
+          <Section
+            title="Child Section"
+            buttonText="Child Action"
+            buttonOnClick={childButtonClick}
+            titleIconName="file"
+          >
+            <p>Child content</p>
+          </Section>
+        </Section>,
+      );
+
+      // Both buttons should be present and functional
+      const parentButton = screen.getByText('Parent Action');
+      const childButton = screen.getByText('Child Action');
+
+      fireEvent.click(parentButton);
+      expect(parentButtonClick).toHaveBeenCalledTimes(1);
+
+      fireEvent.click(childButton);
+      expect(childButtonClick).toHaveBeenCalledTimes(1);
+
+      // Parent should be collapsible, child should not
+      const sections = document.querySelectorAll('.ds-section');
+      expect(sections[0]).toHaveClass('ds-section--collapsible');
+      expect(sections[1]).not.toHaveClass('ds-section--collapsible');
+    });
+  });
+
+  describe('accessibility', () => {
+    test('section has proper role', () => {
+      render(
+        <Section title="Test Section">
+          <p>Content</p>
+        </Section>,
+      );
+
+      expect(screen.getByRole('region')).toBeInTheDocument();
+    });
+
+    test('heading is focusable when collapsible', () => {
+      render(
+        <Section title="Collapsible Section" collapsible>
+          <p>Content</p>
+        </Section>,
+      );
+
+      const heading = screen.getByRole('heading');
+      expect(heading).toHaveAttribute('tabIndex', '0');
+    });
+
+    test('heading is not focusable when not collapsible', () => {
+      render(
+        <Section title="Static Section">
+          <p>Content</p>
+        </Section>,
+      );
+
+      const heading = screen.getByRole('heading');
+      expect(heading).toHaveAttribute('tabIndex', '-1');
+    });
+  });
+});

package/src/components/section/Section.tsx

@@ -0,0 +1,131 @@
+import classNames from 'classnames';
+import { Button, type ButtonSize, type ButtonType } from 'Components/button/Button';
+import { Heading } from 'Components/heading/Heading';
+import type { IconName } from 'Components/icon/allowedIcons';
+import { Icon } from 'Components/icon/Icon';
+import { useState, type HTMLAttributes, type MouseEventHandler } from 'react';
+import { ENTER_KEY, SPACE_KEY } from 'Utils/keyboardConstants';
+
+type SectionProps = {
+  title?: string;
+  titleIconName?: IconName;
+  titleIconColor?: string;
+  titleIconScreenReaderText?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  buttonText?: string;
+  buttonOnClick?: MouseEventHandler<HTMLButtonElement>;
+  buttonType?: ButtonType;
+  buttonSize?: ButtonSize;
+} & HTMLAttributes<HTMLElement>;
+
+export const Section = (props: SectionProps) => {
+  const {
+    className,
+    children,
+    title,
+    titleIconName,
+    titleIconColor,
+    titleIconScreenReaderText,
+    collapsible = false,
+    collapsed: initialCollapsed = false,
+    buttonText,
+    buttonOnClick,
+    buttonType,
+    buttonSize,
+  } = props;
+
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+
+  const toggleCollapsedState = () => {
+    if (collapsible) {
+      setCollapsed(!collapsed);
+    }
+  };
+
+  return (
+    <section
+      className={
+        classNames(
+          'ds-section',
+          {
+            'ds-section--collapsible': collapsible,
+          },
+          className,
+        )
+      }
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section#technical_summary
+      // We want this element to have a role of "region", but that can't be explicity set, so to get it set
+      // implicitly, we slap a label on it and it works.
+      aria-label="section"
+    >
+      <Heading
+        role="heading"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleCollapsedState();
+        }}
+        onKeyDown={(e) => {
+          if ([SPACE_KEY, ENTER_KEY].includes(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+            toggleCollapsedState();
+          }
+        }}
+        tabIndex={collapsible ? 0 : -1}
+      >
+        <Heading.InnerContainer>
+          {title}
+          {titleIconName && (
+            <Icon
+              name={titleIconName}
+              color={titleIconColor}
+              screenReaderText={titleIconScreenReaderText}
+              size={24}
+            />
+          )}
+        </Heading.InnerContainer>
+        <Heading.InnerContainer>
+          {buttonText && (
+            <Button
+              onClick={buttonOnClick}
+              type={buttonType}
+              size={buttonSize}
+            >
+              {buttonText}
+            </Button>
+          )}
+          {collapsible && (
+            <button
+              className="remove-default-button-styles"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleCollapsedState();
+              }}
+              aria-expanded={!collapsed}
+            >
+              <Icon
+                name={collapsed ? 'chevron-down' : 'chevron-up'}
+                size={24}
+                screenReaderText={collapsed ? 'Expand section' : 'Collapse section'}
+              />
+            </button>
+          )}
+        </Heading.InnerContainer>
+      </Heading>
+      <div className={
+        classNames(
+          'ds-section__contents',
+          {
+            'ds-section__contents--collapsed': collapsed,
+          },
+        )
+      }
+      >
+        {children}
+      </div>
+    </section>
+  );
+};

package/src/components/section/section.scss

@@ -0,0 +1,42 @@
+.ds-section {
+  border-radius: var(--section-container-radius);
+  padding: var(--section-container-spacing-vertical) var(--section-container-spacing-horizontal);
+  background-color: var(--section-container-color-background);
+
+  .ds-section {
+    padding-right: 0;
+  }
+
+  .ds-heading {
+    padding: var(--section-heading-spacing-top) var(--section-heading-spacing-right) var(--section-heading-spacing-bottom) var(--section-heading-spacing-left);
+    border-bottom: var(--border-weight) solid var(--section-heading-color-border);
+    margin: 0;
+    border-radius: var(--section-container-radius);
+    color: var(--section-heading-color-text);
+  }
+
+  &--collapsible {
+    .ds-heading {
+      cursor: pointer;
+      background-color: var(--section-heading-interactive-default-color-background);
+      
+      &:hover {
+        background-color: var(--section-heading-interactive-hover-color-background);
+      }
+
+      &:active {
+        background-color: var(--section-heading-interactive-pressed-color-background);
+      }
+
+      &:focus {
+        border: var(--border-weight) solid var(--section-heading-interactive-focus-color-border);
+      }
+    }
+
+    .ds-section__contents {
+      &--collapsed {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/slideover/Slideover.test.tsx

@@ -0,0 +1,36 @@
+import { expect, test, describe, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Slideover } from './Slideover';
+import '@testing-library/jest-dom/vitest';
+import { SlideoverUtils } from 'Utils/SlideoverUtils';
+
+vi.mock('Utils/SlideoverUtils', () => ({
+  SlideoverUtils: {
+    removeSlideover: vi.fn(),
+  },
+}));
+
+describe('Slideover', () => {
+  test('renders the title and children', () => {
+    render(<Slideover title="My Test Slideover"><div>My Content</div></Slideover>);
+    expect(screen.getByText('My Test Slideover')).toBeInTheDocument();
+    expect(screen.getByText('My Content')).toBeInTheDocument();
+  });
+
+  test('renders footer contents when provided', () => {
+    render(<Slideover footerContents={<div>Footer Stuff</div>} />);
+    expect(screen.getByText('Footer Stuff')).toBeInTheDocument();
+  });
+
+  test('does not render footer when footerContents is not provided', () => {
+    const { container } = render(<Slideover />);
+    expect(container.querySelector('.ds-slideover__footer')).not.toBeInTheDocument();
+  });
+
+  test('calls removeSlideover when the back button is clicked', () => {
+    render(<Slideover />);
+    const backButton = screen.getByRole('button', { name: /Back/i });
+    fireEvent.click(backButton);
+    expect(SlideoverUtils.removeSlideover).toHaveBeenCalled();
+  });
+});

package/src/components/slideover/Slideover.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { Button } from 'Components/button/Button';
+import { Heading } from 'Components/heading/Heading';
+import type { IconName } from 'Components/icon/allowedIcons';
+import { Icon } from 'Components/icon/Icon';
+import type { ReactNode } from 'react';
+import { SlideoverUtils } from 'Utils/SlideoverUtils';
+
+export type SlideoverProps = {
+  title?: string;
+  children?: ReactNode;
+  footerContents?: ReactNode;
+  headerIcon?: IconName;
+  centerHeaderText?: boolean;
+};
+
+export const Slideover = (props: SlideoverProps) => {
+  const { title, children, footerContents, headerIcon, centerHeaderText = true } = props;
+
+  return (
+    <aside className="ds-slideover">
+      <div className={classNames('ds-slideover__header', { 'ds-slideover__header--center': centerHeaderText })}>
+        <Button type="tertiary" onClick={SlideoverUtils.removeSlideover}>
+          <Icon name="chevrons-left" />
+          Back
+        </Button>
+        <Heading level={2}>
+          {title}
+          {headerIcon && <Icon name={headerIcon} />}
+        </Heading>
+      </div>
+
+      <div className="ds-slideover__contents">{children}</div>
+
+      {footerContents && <div className="ds-slideover__footer">{footerContents}</div>}
+    </aside>
+  );
+};

package/src/components/slideover/slideover.scss

@@ -0,0 +1,50 @@
+.ds-slideover {
+  background-color: var(--slideover-color-background);
+  position: fixed;
+  right: 0;
+  height: 100%;
+  width: 580px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  &__header {
+    background-color: var(--slideover-header-color-background);
+    display: flex;
+    align-items: center;
+    padding: var(--slideover-header-spacing-padding);
+
+    .ds-heading {
+      flex-grow: 1;
+      font-size: var(--type-headings-h2-size);
+      padding: 0;
+      margin: 0;
+    }
+
+    &--center {
+      .ds-heading {
+        justify-content: center;
+        gap: var(--slideover-header-spacing-padding);
+      }
+    }
+  }
+
+  &__contents {
+    flex-grow: 1;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--slideover-spacing-padding);
+    padding: var(--slideover-spacing-padding);
+  }
+
+  &__footer {
+    padding: var(--slideover-footer-spacing-vertical) var(--slideover-footer-spacing-horizontal);
+    background-color: var(--slideover-footer-color-background);
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    justify-content: flex-end;
+  }
+}