@arbor-education/design-system.components 0.16.1 → 0.17.1

package/src/components/treeRow/TreeRow.test.tsx

@@ -0,0 +1,371 @@
+import { describe, test, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { TreeRow } from 'Components/treeRow/TreeRow';
+import { Row } from 'Components/row/Row';
+
+describe('TreeRow', () => {
+  describe('data-driven: flat list', () => {
+    test('renders all leaf items', () => {
+      const items = [
+        { label: 'First Name', value: 'John' },
+        { label: 'Last Name', value: 'Smith' },
+      ];
+      render(<TreeRow items={items} />);
+      expect(screen.getByText('First Name')).toBeInTheDocument();
+      expect(screen.getByText('John')).toBeInTheDocument();
+      expect(screen.getByText('Last Name')).toBeInTheDocument();
+      expect(screen.getByText('Smith')).toBeInTheDocument();
+    });
+
+    test('applies custom className to root', () => {
+      render(<TreeRow items={[{ label: 'L', value: 'V' }]} className="custom" />);
+      expect(document.querySelector('.ds-tree-row')).toHaveClass('custom');
+    });
+  });
+
+  describe('data-driven: collapsible sections', () => {
+    test('renders a trigger button for items with children', () => {
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      expect(screen.getByRole('button', { name: /subject/i })).toBeInTheDocument();
+    });
+
+    test('children are not in the document when collapsed', () => {
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      expect(screen.queryByText('Child')).not.toBeInTheDocument();
+    });
+
+    test('clicking the trigger reveals children', async () => {
+      const user = userEvent.setup();
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      await user.click(screen.getByRole('button', { name: /subject/i }));
+      expect(screen.getByText('Child')).toBeInTheDocument();
+    });
+
+    test('clicking the trigger again hides children', async () => {
+      const user = userEvent.setup();
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      const trigger = screen.getByRole('button', { name: /subject/i });
+      await user.click(trigger);
+      await user.click(trigger);
+      expect(screen.queryByText('Child')).not.toBeInTheDocument();
+    });
+
+    test('trigger has aria-expanded false when closed', () => {
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      expect(screen.getByRole('button', { name: /subject/i })).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    test('trigger has aria-expanded true when open', async () => {
+      const user = userEvent.setup();
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      await user.click(screen.getByRole('button', { name: /subject/i }));
+      expect(screen.getByRole('button', { name: /subject/i })).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    test('multiple sections can be open simultaneously', async () => {
+      const user = userEvent.setup();
+      const items = [
+        { label: 'Section A', children: [{ label: 'Child A', value: 'Va' }] },
+        { label: 'Section B', children: [{ label: 'Child B', value: 'Vb' }] },
+      ];
+      render(<TreeRow items={items} />);
+      await user.click(screen.getByRole('button', { name: /section a/i }));
+      await user.click(screen.getByRole('button', { name: /section b/i }));
+      expect(screen.getByText('Child A')).toBeInTheDocument();
+      expect(screen.getByText('Child B')).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    test('decorative right caret icons are aria-hidden', () => {
+      const items = [{ label: 'Subject', onClick: vi.fn(), children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      const carets = document.querySelectorAll('.ds-tree-row__caret');
+      expect(carets.length).toBeGreaterThan(0);
+      carets.forEach((caret) => {
+        expect(caret).toHaveAttribute('aria-hidden', 'true');
+      });
+    });
+
+    test('Enter key expands a collapsed section', async () => {
+      const user = userEvent.setup();
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      const trigger = screen.getByRole('button', { name: /subject/i });
+      trigger.focus();
+      await user.keyboard('{Enter}');
+      expect(screen.getByText('Child')).toBeInTheDocument();
+    });
+
+    test('Space key expands a collapsed section', async () => {
+      const user = userEvent.setup();
+      const items = [{ label: 'Subject', children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      const trigger = screen.getByRole('button', { name: /subject/i });
+      trigger.focus();
+      await user.keyboard(' ');
+      expect(screen.getByText('Child')).toBeInTheDocument();
+    });
+  });
+
+  describe('depth indentation', () => {
+    test('nested section content is wrapped in ds-tree-row__content for CSS indentation', () => {
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Parent">
+            <TreeRow.Section label="Child">
+              <Row label="Leaf" value="V" />
+            </TreeRow.Section>
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      const contents = document.querySelectorAll('.ds-tree-row__content');
+      expect(contents.length).toBeGreaterThan(0);
+      // Each content wrapper provides the indentation via CSS padding-left
+      contents.forEach((content) => {
+        expect(content).toHaveClass('ds-tree-row__content');
+      });
+    });
+  });
+
+  describe('compound component API', () => {
+    test('TreeRow.Section renders a trigger button', () => {
+      render(
+        <TreeRow>
+          <TreeRow.Section label="My Section">
+            <Row label="Child" value="V" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      expect(screen.getByRole('button', { name: /my section/i })).toBeInTheDocument();
+    });
+
+    test('Row renders a leaf row inside TreeRow', () => {
+      render(
+        <TreeRow>
+          <Row label="Name" value="John" />
+        </TreeRow>,
+      );
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('John')).toBeInTheDocument();
+    });
+
+    test('compound Section expands on click', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Section">
+            <Row label="Child" value="V" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      await user.click(screen.getByRole('button', { name: /section/i }));
+      expect(screen.getByText('Child')).toBeInTheDocument();
+    });
+
+    test('Row with onClick renders a clickable row', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <TreeRow>
+          <Row label="Name" value="Jacob Black" onClick={onClick} />
+        </TreeRow>,
+      );
+      await user.click(screen.getByText('Name'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('defaultValue — pre-opened sections', () => {
+    test('section with matching id starts open', () => {
+      const items = [
+        { id: 'address', label: 'Address', children: [{ label: 'Street', value: '671 Olympic Ave' }] },
+      ];
+      render(<TreeRow items={items} defaultValue={['address']} />);
+      expect(screen.getByText('Street')).toBeInTheDocument();
+    });
+
+    test('section without matching id starts closed', () => {
+      const items = [
+        { id: 'address', label: 'Address', children: [{ label: 'Street', value: '671 Olympic Ave' }] },
+      ];
+      render(<TreeRow items={items} defaultValue={['other-id']} />);
+      expect(screen.queryByText('Street')).not.toBeInTheDocument();
+    });
+
+    test('multiple sections can be pre-opened via defaultValue', () => {
+      const items = [
+        { id: 'personal', label: 'Personal', children: [{ label: 'Name', value: 'Bella Swan' }] },
+        { id: 'address', label: 'Address', children: [{ label: 'Street', value: '671 Olympic Ave' }] },
+      ];
+      render(<TreeRow items={items} defaultValue={['personal', 'address']} />);
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Street')).toBeInTheDocument();
+    });
+
+    test('compound TreeRow.Section with id starts open when id in defaultValue', () => {
+      render(
+        <TreeRow defaultValue={['contacts']}>
+          <TreeRow.Section id="contacts" label="Contacts">
+            <Row label="Charlie Swan" value="Father" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      expect(screen.getByText('Charlie Swan')).toBeInTheDocument();
+    });
+
+    test('section without id uses generated id and starts closed by default', () => {
+      const items = [
+        { label: 'Address', children: [{ label: 'Street', value: '671 Olympic Ave' }] },
+      ];
+      render(<TreeRow items={items} />);
+      expect(screen.queryByText('Street')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Section onClick', () => {
+    test('clicking the row fires onClick', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Contacts" onClick={onClick}>
+            <Row label="Name" value="Jacob Black" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      await user.click(document.querySelector('.ds-tree-row__row--branch')!);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('clicking the trigger does not fire section onClick', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Contacts" onClick={onClick}>
+            <Row label="Name" value="Jacob Black" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      await user.click(screen.getByRole('button', { name: /contacts/i }));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    test('clicking the trigger still expands the section when onClick is set', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Contacts" onClick={vi.fn()}>
+            <Row label="Name" value="Jacob Black" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      await user.click(screen.getByRole('button', { name: /contacts/i }));
+      expect(screen.getByText('Jacob Black')).toBeInTheDocument();
+    });
+
+    test('section with onClick has ds-tree-row__row--clickable class', () => {
+      const onClick = vi.fn();
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Contacts" onClick={onClick}>
+            <Row label="Name" value="V" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      expect(document.querySelector('.ds-tree-row__row--clickable')).toBeInTheDocument();
+    });
+
+    test('section without onClick does not have ds-tree-row__row--clickable class', () => {
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Contacts">
+            <Row label="Name" value="V" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      expect(document.querySelector('.ds-tree-row__row--clickable')).not.toBeInTheDocument();
+    });
+
+    test('section with onClick renders an arrow-right caret icon', () => {
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Contacts" onClick={vi.fn()}>
+            <Row label="Name" value="V" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      expect(document.querySelector('.ds-tree-row__caret.ds-icon-arrow-right')).toBeInTheDocument();
+    });
+
+    test('section without onClick does not render an arrow-right caret icon', () => {
+      render(
+        <TreeRow>
+          <TreeRow.Section label="Contacts">
+            <Row label="Name" value="V" />
+          </TreeRow.Section>
+        </TreeRow>,
+      );
+      expect(document.querySelector('.ds-tree-row__caret.ds-icon-arrow-right')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('onClick on data-driven items', () => {
+    test('clicking a leaf row fires the onClick handler', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      const items = [{ label: 'Name', value: 'Bella Swan', onClick }];
+      render(<TreeRow items={items} />);
+      await user.click(screen.getByText('Name'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('clickable leaf row has ds-row--clickable class', () => {
+      const onClick = vi.fn();
+      const items = [{ label: 'Name', value: 'Bella Swan', onClick }];
+      render(<TreeRow items={items} />);
+      expect(document.querySelector('.ds-row--clickable')).toBeInTheDocument();
+    });
+
+    test('non-clickable leaf row does not have ds-row--clickable class', () => {
+      const items = [{ label: 'Name', value: 'Bella Swan' }];
+      render(<TreeRow items={items} />);
+      expect(document.querySelector('.ds-row--clickable')).not.toBeInTheDocument();
+    });
+
+    test('clicking a section row fires onClick', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      const items = [{ label: 'Section', onClick, children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      await user.click(document.querySelector('.ds-tree-row__row--branch')!);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('clicking the trigger on a section item does not fire onClick', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      const items = [{ label: 'Section', onClick, children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      await user.click(screen.getByRole('button', { name: /section/i }));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    test('section item with onClick still expands when trigger is clicked', async () => {
+      const user = userEvent.setup();
+      const items = [{ label: 'Section', onClick: vi.fn(), children: [{ label: 'Child', value: 'V' }] }];
+      render(<TreeRow items={items} />);
+      await user.click(screen.getByRole('button', { name: /section/i }));
+      expect(screen.getByText('Child')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/treeRow/TreeRow.tsx

@@ -0,0 +1,85 @@
+import { useContext } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+import classNames from 'classnames';
+import { Row } from 'Components/row/Row';
+import { DepthContext, getDepthPadding, TreeRowSection } from 'Components/treeRow/TreeRowSection';
+
+export type { TreeRowSectionProps } from 'Components/treeRow/TreeRowSection';
+
+export type TreeRowItem = {
+  id?: string;
+  label?: string;
+  value?: string;
+  note?: string;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  children?: TreeRowItem[];
+};
+
+type TreeRowBaseProps = {
+  defaultValue?: string[];
+  className?: string;
+};
+
+type TreeRowDataDrivenProps = TreeRowBaseProps & {
+  items: TreeRowItem[];
+  children?: never;
+};
+
+type TreeRowCompoundProps = TreeRowBaseProps & {
+  items?: never;
+  children?: ReactNode;
+};
+
+export type TreeRowProps = TreeRowDataDrivenProps | TreeRowCompoundProps;
+
+const DataDrivenList = ({ items }: { items: TreeRowItem[] }) => {
+  const depth = useContext(DepthContext);
+
+  return (
+    <>
+      {items.map((item, index) => {
+        const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+
+        if (!hasChildren) {
+          return (
+            <Row
+              key={item.id ?? item.label ?? String(index)}
+              label={item.label}
+              value={item.value}
+              note={item.note}
+              onClick={item.onClick}
+              className="ds-tree-row__row"
+              style={{ paddingLeft: getDepthPadding(depth) }}
+            />
+          );
+        }
+
+        return (
+          <TreeRowSection key={item.id ?? item.label ?? String(index)} id={item.id} label={item.label ?? ''} onClick={item.onClick}>
+            <DataDrivenList items={item.children ?? []} />
+          </TreeRowSection>
+        );
+      })}
+    </>
+  );
+};
+
+export const TreeRow = ({ items, defaultValue, children, className }: TreeRowProps) => (
+  <Accordion.Root
+    type="multiple"
+    defaultValue={defaultValue}
+    className={classNames('ds-tree-row', className)}
+  >
+    <DepthContext.Provider value={0}>
+      {items ? <DataDrivenList items={items} /> : children}
+    </DepthContext.Provider>
+  </Accordion.Root>
+);
+
+TreeRow.Section = TreeRowSection;
+
+export namespace TreeRow {
+  export type Item = TreeRowItem;
+  export type Props = TreeRowProps;
+}

package/src/components/treeRow/TreeRowSection.tsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useId } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
+
+export const DepthContext = createContext(0);
+
+export function getDepthPadding(depth: number): string {
+  if (depth === 0) return 'var(--section-list-row-spacing-horizontal)';
+  return `calc(var(--spacing-xxlarge, 32px) * ${depth})`;
+}
+
+export type TreeRowSectionProps = {
+  id?: string;
+  label: string;
+  children: ReactNode;
+  className?: string;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+};
+
+export const TreeRowSection = ({ id: idProp, label, children, className, onClick }: TreeRowSectionProps) => {
+  const depth = useContext(DepthContext);
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+
+  return (
+    <Accordion.Item value={id} className={classNames('ds-tree-row__item', className)}>
+      <div
+        className={classNames('ds-tree-row__row', 'ds-tree-row__row--branch', {
+          'ds-tree-row__row--clickable': !!onClick,
+        })}
+        style={{ paddingLeft: getDepthPadding(depth) }}
+        onClick={onClick}
+      >
+        <Accordion.Trigger
+          className="ds-tree-row__trigger"
+          onClick={event => event.stopPropagation()}
+        >
+          <span className="ds-tree-row__trigger-label">{label}</span>
+          <Icon name="chevron-up" className="ds-tree-row__expand-icon" size={16} />
+          <Icon name="chevron-down" className="ds-tree-row__collapse-icon" size={16} />
+        </Accordion.Trigger>
+        {onClick && (
+          <>
+            <Icon name="chevron-right" className="ds-tree-row__caret" size={16} />
+            <Icon name="arrow-right" className="ds-tree-row__caret" size={16} />
+          </>
+        )}
+      </div>
+      <Accordion.Content className="ds-tree-row__content">
+        <DepthContext.Provider value={depth + 1}>{children}</DepthContext.Provider>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};

package/src/components/treeRow/treeRow.scss

@@ -0,0 +1,134 @@
+.ds-tree-row {
+  width: 100%;
+}
+
+.ds-tree-row__caret {
+  flex-shrink: 0;
+  color: var(--section-list-row-default-color-icon-arrow, #aaa);
+
+  &.ds-icon-arrow-right {
+    display: none;
+  }
+}
+
+.ds-tree-row__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--section-list-row-color-border, #f8f8f8);
+  border-radius: var(--section-list-row-radius, 8px);
+
+  &--branch {
+    background-color: var(--section-list-row-default-color-background);
+    padding-block: var(--spacing-xsmall, 4px);
+    padding-inline-end: var(--section-list-row-spacing-horizontal);
+    gap: var(--spacing-small);
+
+    &:hover:not(:has(.ds-tree-row__trigger:hover)) {
+      background: var(--section-list-row-hover-hover-bg, #f8f8f8);
+    }
+  }
+
+  &--clickable {
+    cursor: pointer;
+
+    &:hover:not(:has(.ds-tree-row__trigger:hover)) {
+      .ds-tree-row__caret {
+        &.ds-icon-chevron-right {
+          display: none;
+        }
+
+        &.ds-icon-arrow-right {
+          display: block;
+          color: var(--section-list-row-hover-color-icon-arrow, #2f2f2f);
+        }
+      }
+    }
+  }
+
+}
+
+.ds-tree-row__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-small, 8px);
+  background: transparent;
+  border: none;
+  border-radius: var(--border-radius-small, 8px);
+  padding: var(--spacing-xsmall, 4px) var(--spacing-small, 8px);
+  color: var(--button-medium-secondary-default-color-text, #2f2f2f);
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--button-medium-secondary-hover-color-background, #f8f8f8);
+    border-radius: var(--border-radius-small, 8px);
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-radius: var(--border-radius-small, 8px);
+    background: rgb(255 255 255 / 1%);
+    box-shadow: 0 0 0 3px var(--color-brand-300, #7ed28e);
+  }
+}
+
+.ds-tree-row__trigger-label {
+  font-weight: var(--type-body-bold-weight, 600);
+}
+
+.ds-tree-row__expand-icon {
+  display: block;
+  flex-shrink: 0;
+  color: var(--section-list-row-default-color-icon-arrow, #2f2f2f);
+}
+
+.ds-tree-row__collapse-icon {
+  display: none;
+  flex-shrink: 0;
+  color: var(--section-list-row-default-color-icon-arrow, #2f2f2f);
+}
+
+.ds-tree-row__item[data-state='open'] {
+  > .ds-tree-row__row {
+    .ds-tree-row__expand-icon {
+      display: none;
+    }
+
+    .ds-tree-row__collapse-icon {
+      display: block;
+    }
+  }
+}
+
+.ds-tree-row__content {
+  overflow: hidden;
+
+  &[data-state='open'] {
+    animation: ds-tree-row-open 150ms ease-out;
+  }
+
+  &[data-state='closed'] {
+    animation: ds-tree-row-close 150ms ease-in;
+  }
+}
+
+@keyframes ds-tree-row-open {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes ds-tree-row-close {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}

package/src/docs/Contributing.mdx

@@ -239,3 +239,4 @@ yarn watch
 - [GitHub repository](https://github.com/arbor-education/design-system.components)
 - [CONTRIBUTING.md](https://github.com/arbor-education/design-system.components/blob/main/CONTRIBUTING.md) — the full contribution guide
 - [NPM package](https://www.npmjs.com/package/@arbor-education/design-system.components)
+- [AI personalities (FRENDS)](https://orchard.atlassian.net/wiki/spaces/AG/pages/2575958235/AI+personalities) — opt-in personality skills for Claude Code / Cursor and why we don't default them in repos

package/src/index.scss

@@ -51,4 +51,6 @@
 @use "components/row/row.scss";
 @use "components/combobox/combobox.scss";
 @use "components/toggle/toggle.scss";
+@use "components/dataViewCard/dataViewCard.scss";
+@use "components/treeRow/treeRow.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

@@ -52,8 +52,11 @@ export { Toast } from 'Components/toast/Toast';
 export { Toggle } from 'Components/toggle/Toggle';
 export { Tooltip } from 'Components/tooltip/Tooltip';
 export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
-export { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';
+export { GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';
+export { TreeRow, type TreeRowItem, type TreeRowProps, type TreeRowSectionProps } from 'Components/treeRow/TreeRow';
 export { UserDropdown } from 'Components/userDropdown/UserDropdown';
 export { ModalUtils } from 'Utils/ModalUtils';
 export { PopupParentContext } from 'Utils/PopupParentContext';
 export { SlideoverUtils } from 'Utils/SlideoverUtils';
+export { ArborLogo, type ArborLogoProps } from 'Components/arborLogo/ArborLogo';
+export { DataViewCard, type DataViewCardProps } from 'Components/dataViewCard/DataViewCard';