@arbor-education/design-system.components 4.0.0 → 4.1.0

package/src/components/widgetFavourites/WidgetFavourites.test.tsx

@@ -63,6 +63,14 @@ describe('WidgetFavourites', () => {
     expect(container.querySelector('.ds-widget--floating')).toBeInTheDocument();
   });
 
+  test('applies the bounded root class alongside a consumer className', () => {
+    const { container } = render(
+      <WidgetFavourites heading="Favourites" items={mockItems} className="consumer-class" />,
+    );
+
+    expect(container.querySelector('.ds-widget')).toHaveClass('ds-widget-favourites', 'consumer-class');
+  });
+
   test('renders linked widget header when headingHref is provided', () => {
     render(
       <WidgetFavourites
@@ -75,6 +83,97 @@ describe('WidgetFavourites', () => {
     expect(screen.getByRole('link', { name: 'Favourites (2)' })).toHaveAttribute('href', '/favourites');
   });
 
+  test('forwards linkProps to the linked header', () => {
+    const onClick = vi.fn();
+
+    render(
+      <WidgetFavourites
+        heading="Favourites (2)"
+        headingHref="/favourites"
+        linkProps={{ onClick, target: '_blank' }}
+        items={mockItems}
+      />,
+    );
+
+    const link = screen.getByRole('link', { name: 'Favourites (2)' });
+    fireEvent.click(link);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  test('renders the linked header through renderLink', () => {
+    render(
+      <WidgetFavourites
+        heading="Favourites (2)"
+        headingHref="/favourites"
+        renderLink={({ href, className, children }) => (
+          <a href={href} className={className} data-router-link="true">
+            {children}
+          </a>
+        )}
+        items={mockItems}
+      />,
+    );
+
+    expect(screen.getByRole('link', { name: 'Favourites (2)' })).toHaveAttribute('data-router-link', 'true');
+  });
+
+  test('rejects heading link props without headingHref at the type level', () => {
+    render(
+      <>
+        {/* @ts-expect-error linkProps requires headingHref */}
+        <WidgetFavourites heading="Favourites" items={mockItems} linkProps={{ onClick: vi.fn() }} />
+        {/* @ts-expect-error renderLink requires headingHref */}
+        <WidgetFavourites heading="Favourites" items={mockItems} renderLink={() => <a />} />
+      </>,
+    );
+
+    expect(screen.queryByRole('link', { name: 'Favourites' })).not.toBeInTheDocument();
+  });
+
+  test('applies item linkProps to the row link', () => {
+    const onClick = vi.fn();
+
+    render(
+      <WidgetFavourites
+        heading="Favourites"
+        items={[{
+          id: 'daily',
+          label: 'Daily Attendance',
+          href: '/attendance/daily',
+          linkProps: { onClick, target: '_blank' },
+        }]}
+      />,
+    );
+
+    const link = screen.getByRole('link', { name: 'Daily Attendance' });
+    fireEvent.click(link);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', '/attendance/daily');
+  });
+
+  test('WidgetFavourites.Item applies linkProps to the row link', () => {
+    const onClick = vi.fn();
+
+    render(
+      <ul>
+        <WidgetFavourites.Item
+          id="daily"
+          label="Daily Attendance"
+          href="/attendance/daily"
+          linkProps={{ onClick }}
+        />
+      </ul>,
+    );
+
+    fireEvent.click(screen.getByRole('link', { name: 'Daily Attendance' }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
   test('uses default remove label on remove button', () => {
     render(
       <WidgetFavourites heading="Favourites" items={mockItems} onRemoveItem={vi.fn()} />,

package/src/components/widgetFavourites/WidgetFavourites.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { EmptyState } from 'Components/emptyState/EmptyState';
 import { Widget } from 'Components/widget/Widget';
 import type { Widget as WidgetComponent } from 'Components/widget/Widget';
@@ -18,6 +19,8 @@ export const WidgetFavourites = (props: WidgetFavouritesProps): React.JSX.Elemen
     tooltip,
     items,
     headingHref,
+    renderLink,
+    linkProps,
     isFloating = false,
     onRemoveItem,
     emptyState = defaultEmptyState,
@@ -31,7 +34,7 @@ export const WidgetFavourites = (props: WidgetFavouritesProps): React.JSX.Elemen
     isFloating,
     isEmpty,
     emptyState,
-    className,
+    className: classNames('ds-widget-favourites', className),
   };
 
   const body = (
@@ -47,6 +50,7 @@ export const WidgetFavourites = (props: WidgetFavouritesProps): React.JSX.Elemen
                 label={item.label}
                 href={item.href}
                 removeLabel={item.removeLabel}
+                linkProps={item.linkProps}
                 onRemove={onRemoveItem ? () => onRemoveItem(item.id) : undefined}
               />
             ))}
@@ -60,7 +64,7 @@ export const WidgetFavourites = (props: WidgetFavouritesProps): React.JSX.Elemen
     <Widget
       {...({
         ...widgetCommonProps,
-        ...(headingHref ? { href: headingHref } : {}),
+        ...(headingHref ? { href: headingHref, renderLink, linkProps } : {}),
       } as WidgetComponent.Props)}
     >
       {body}

package/src/components/widgetFavourites/WidgetFavouritesItem.tsx

@@ -11,6 +11,7 @@ export const WidgetFavouritesItem = (props: WidgetFavouritesItemProps): React.JS
     label,
     href,
     removeLabel = FAVOURITE_TOOLTIP.remove,
+    linkProps,
     onRemove,
     className,
   } = props;
@@ -20,7 +21,7 @@ export const WidgetFavouritesItem = (props: WidgetFavouritesItemProps): React.JS
       className={classNames('ds-widget-favourites__item', className)}
       data-testid={`widget-favourites-item-${id}`}
     >
-      <a href={href} className={linkClassName}>
+      <a {...linkProps} href={href} className={linkClassName}>
         {label}
       </a>
       {onRemove && (

package/src/components/widgetFavourites/types.ts

@@ -1,15 +1,17 @@
+import type { WidgetHeadingLinkProps, WidgetLinkedProps } from 'Components/widget/types';
+
 export type WidgetFavouritesItemData = {
   id: string;
   label: string;
   href: string;
   removeLabel?: string;
+  linkProps?: WidgetLinkedProps['linkProps'];
 };
 
-export type WidgetFavouritesProps = {
+export type WidgetFavouritesProps = WidgetHeadingLinkProps & {
   heading: React.ReactNode;
   tooltip?: string;
   items: WidgetFavouritesItemData[];
-  headingHref?: string;
   isFloating?: boolean;
   onRemoveItem?: (id: string) => void;
   emptyState?: React.ReactNode;
@@ -21,6 +23,7 @@ export type WidgetFavouritesItemProps = {
   label: string;
   href: string;
   removeLabel?: string;
+  linkProps?: WidgetLinkedProps['linkProps'];
   onRemove?: () => void;
   className?: string;
 };

package/src/components/widgetFavourites/widgetFavourites.scss

@@ -1,3 +1,10 @@
+// Grid resolves its row against max-height, giving the content a definite height so only the body scrolls.
+.ds-widget.ds-widget-favourites {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  max-height: var(--widget-favourites-max-height);
+}
+
 .ds-widget-favourites__list {
   list-style: none;
   margin: 0;

package/src/tokens.scss

@@ -882,6 +882,7 @@
   --widget-favourites-weight-border: var(--border-weight);
   --widget-favourites-spacing-vertical: var(--spacing-small);
   --widget-favourites-spacing-horizontal: var(--spacing-small);
+  --widget-favourites-max-height: 375px;
   --widget-attachments-hover-color-icon: var(--color-grey-900);
   --widget-attachments-hover-color-text: var(--color-grey-900);
   --widget-attachments-hover-color-background: var(--color-grey-100);

package/tokens/json/Arbor.json

@@ -3973,6 +3973,10 @@
         "spacing-horizontal": {
           "$type": "dimension",
           "$value": "{spacing.small}"
+        },
+        "max-height": {
+          "$type": "dimension",
+          "$value": "375px"
         }
       },
       "attachments": {