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

package/src/components/row/Row.test.tsx

@@ -43,6 +43,31 @@ describe('Row component', () => {
     expect(row).toHaveClass('ds-row', 'custom-row');
   });
 
+  describe('href behaviour', () => {
+    test('wraps value in an anchor when href is provided', () => {
+      render(<Row label="Profile" value="View profile" href="/students/123" />);
+
+      const link = screen.getByRole('link', { name: 'View profile' });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', '/students/123');
+    });
+
+    test('uses href as link text when no value is provided', () => {
+      render(<Row label="Document" href="/documents/report.pdf" />);
+
+      const link = screen.getByRole('link', { name: '/documents/report.pdf' });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', '/documents/report.pdf');
+    });
+
+    test('renders value as plain text when href is not provided', () => {
+      render(<Row label="Profile" value="View profile" />);
+
+      expect(screen.getByText('View profile')).toBeInTheDocument();
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+  });
+
   describe('click behaviour', () => {
     test('calls onClick handler when clicked', () => {
       const handleClick = vi.fn();

package/src/components/row/Row.tsx

@@ -8,6 +8,7 @@ export type RowProps = {
   style?: CSSProperties;
   label?: ReactNode;
   value?: ReactNode;
+  href?: string;
   note?: ReactNode;
   onClick?: MouseEventHandler<HTMLDivElement>;
 };
@@ -18,6 +19,7 @@ export const Row = (props: RowProps) => {
     style,
     label,
     value,
+    href,
     note,
     onClick,
   } = props;
@@ -44,7 +46,15 @@ export const Row = (props: RowProps) => {
       tabIndex={isClickable ? 0 : -1}
     >
       <span className="ds-row__label">{label}</span>
-      <span className="ds-row__value">{value}</span>
+      <span className="ds-row__value">
+        {href
+          ? (
+              <a href={href}>
+                {value || href}
+              </a>
+            )
+          : value}
+      </span>
       <span className="ds-row__note">{note}</span>
       {isClickable && (
         <>