@arbor-education/design-system.components 0.25.0 → 0.25.1

package/src/components/tag/Tag.test.tsx

@@ -53,13 +53,20 @@ describe('Tag', () => {
 
   describe('onRemove', () => {
     test('renders remove button when onRemove is provided', () => {
-      render(<Tag onRemove={() => {}}>Removable</Tag>);
+      render(
+        <Tag onRemove={() => {}}>
+          Removable
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument();
     });
 
     test('uses a custom remove label when provided', () => {
       render(
-        <Tag onRemove={() => {}} removeLabel="Remove Alice Johnson">
+        <Tag
+          onRemove={() => {}}
+          removeLabel="Remove Alice Johnson"
+        >
           Removable
         </Tag>,
       );
@@ -67,13 +74,20 @@ describe('Tag', () => {
     });
 
     test('keeps the remove button in the tab order by default', () => {
-      render(<Tag onRemove={() => {}}>Removable</Tag>);
+      render(
+        <Tag onRemove={() => {}}>
+          Removable
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Remove' })).toHaveAttribute('tabindex', '0');
     });
 
     test('allows composite parents to remove the button from the tab order', () => {
       render(
-        <Tag onRemove={() => {}} removeButtonTabIndex={-1}>
+        <Tag
+          onRemove={() => {}}
+          removeButtonTabIndex={-1}
+        >
           Removable
         </Tag>,
       );
@@ -110,18 +124,32 @@ describe('Tag', () => {
 
   describe('onClick', () => {
     test('renders a primary action button when onClick is provided', () => {
-      render(<Tag onClick={() => {}}>Clickable</Tag>);
+      render(
+        <Tag onClick={() => {}}>
+          Clickable
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Clickable' })).toBeInTheDocument();
     });
 
     test('uses a custom action label when provided', () => {
-      render(<Tag onClick={() => {}} actionLabel="Open filter for Alice Johnson">Alice Johnson</Tag>);
+      render(
+        <Tag
+          onClick={() => {}}
+          actionLabel="Open filter for Alice Johnson"
+        >
+          Alice Johnson
+        </Tag>,
+      );
       expect(screen.getByRole('button', { name: 'Open filter for Alice Johnson' })).toBeInTheDocument();
     });
 
     test('allows composite parents to remove the primary action from the tab order', () => {
       render(
-        <Tag onClick={() => {}} actionButtonTabIndex={-1}>
+        <Tag
+          onClick={() => {}}
+          actionButtonTabIndex={-1}
+        >
           Clickable
         </Tag>,
       );
@@ -138,7 +166,11 @@ describe('Tag', () => {
 
     test('forwards aria-controls and aria-expanded to the primary action button', () => {
       render(
-        <Tag onClick={() => {}} ariaControls="filter-modal" ariaExpanded={true}>
+        <Tag
+          onClick={() => {}}
+          ariaControls="filter-modal"
+          ariaExpanded={true}
+        >
           Clickable
         </Tag>,
       );

package/src/components/tagList/TagList.test.tsx

@@ -10,9 +10,15 @@ const mockTagListCollapseRects = () =>
   vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect(this: HTMLElement) {
     let width = 0;
 
-    if (this.classList.contains('ds-tag-list__viewport')) width = 220;
-    else if (this.classList.contains('ds-tag-list__item')) width = 72;
-    else if (this.classList.contains('ds-tag-list__overflow')) width = 76;
+    if (this.classList.contains('ds-tag-list__viewport')) {
+      width = 220;
+    }
+    else if (this.classList.contains('ds-tag-list__item')) {
+      width = 72;
+    }
+    else if (this.classList.contains('ds-tag-list__overflow')) {
+      width = 76;
+    }
 
     return {
       width,

package/src/components/tagList/TagList.tsx

@@ -99,7 +99,9 @@ export const TagList = ({
       [
         ...visibleItemIndices.flatMap((index) => {
           const item = items[index];
-          if (!item) return [];
+          if (!item) {
+            return [];
+          }
 
           const targets: TagListTarget[] = [];
           if (item.onClick) {
@@ -117,7 +119,9 @@ export const TagList = ({
   const hasInteractiveItems = visibleInteractiveTargets.length > 0;
 
   const getHighlightedIndexForTarget = useCallback((target: TagListTarget | null): number | null => {
-    if (!target || target === 'overflow') return null;
+    if (!target || target === 'overflow') {
+      return null;
+    }
 
     return itemIndexById.get(getTargetItemId(target)) ?? null;
   }, [itemIndexById]);
@@ -127,7 +131,9 @@ export const TagList = ({
   }, [getHighlightedIndexForTarget, onHighlightedItemIndexChange]);
 
   const handleDeleteKey = useCallback((target: TagListTarget, event: React.KeyboardEvent<HTMLElement>): boolean => {
-    if (target === 'overflow') return false;
+    if (target === 'overflow') {
+      return false;
+    }
 
     const item = items[getHighlightedIndexForTarget(target) ?? -1];
     if (item?.onRemove) {
@@ -229,7 +235,9 @@ export const TagList = ({
     : null;
 
   if (items.length === 0) {
-    if (!emptyState) return null;
+    if (!emptyState) {
+      return null;
+    }
     return <div className={classNames('ds-tag-list', 'ds-tag-list--empty', className)}>{emptyState}</div>;
   }
 

package/src/components/treeRow/TreeRowSection.tsx

@@ -7,7 +7,9 @@ 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)';
+  if (depth === 0) {
+    return 'var(--section-list-row-spacing-horizontal)';
+  }
   return `calc(var(--spacing-xxlarge, 32px) * ${depth})`;
 }
 

package/src/components/userDropdown/UserDropdown.stories.tsx

@@ -45,17 +45,23 @@ export const Default: Story = {
           {
             logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
             name: 'Arbor Workflows',
-            onClick: () => { console.log('Open Arbor Workflows'); },
+            onClick: () => {
+              console.log('Open Arbor Workflows');
+            },
           },
           {
             logo: <AppLogo src={logoGovernorHub} alt="GovernorHub" />,
             name: 'GovernorHub',
-            onClick: () => { console.log('Open GovernorHub'); },
+            onClick: () => {
+              console.log('Open GovernorHub');
+            },
           },
           {
             logo: <AppLogo src={logoTheKey} alt="The Key" />,
             name: 'The Key',
-            onClick: () => { console.log('Open The Key'); },
+            onClick: () => {
+              console.log('Open The Key');
+            },
           },
         ],
       },
@@ -68,30 +74,42 @@ export const Default: Story = {
           logo: <AppLogo src={logoArborWorkflows} alt="Arbor Finance" />,
           name: 'Arbor Finance',
           description: 'Cloud-based accounting',
-          onClick: () => { console.log('Open Arbor Finance'); },
+          onClick: () => {
+            console.log('Open Arbor Finance');
+          },
         },
         {
           logo: <AppLogo src={logoRobin} alt="Robin" />,
           name: 'Robin',
           description: 'AI website compliance checks',
-          onClick: () => { console.log('Open Robin'); },
+          onClick: () => {
+            console.log('Open Robin');
+          },
         },
         {
           logo: <AppLogo src={logoSamPeople} alt="SAMPeople" />,
           name: 'SAMPeople',
           description: 'HR and recruitment',
-          onClick: () => { console.log('Open SAMPeople'); },
+          onClick: () => {
+            console.log('Open SAMPeople');
+          },
         },
         {
           logo: <AppLogo src={logoTimetabler} alt="Timetabler" />,
           name: 'Timetabler',
           description: 'Schedule timetables and more',
-          onClick: () => { console.log('Open Timetabler'); },
+          onClick: () => {
+            console.log('Open Timetabler');
+          },
         },
       ],
     },
-    userInfoAction: { type: 'link', onClick: () => { console.log('View profile'); } },
-    onSignOut: () => { console.log('Sign out'); },
+    userInfoAction: { type: 'link', onClick: () => {
+      console.log('View profile');
+    } },
+    onSignOut: () => {
+      console.log('Sign out');
+    },
     signOutLabel: 'Sign out of Arbor',
   },
 };
@@ -107,12 +125,18 @@ export const WithApps: Story = {
       {
         label: 'Quick Actions',
         apps: [
-          { name: 'Settings', onClick: () => { console.log('Settings'); } },
-          { name: 'Help', onClick: () => { console.log('Help'); } },
+          { name: 'Settings', onClick: () => {
+            console.log('Settings');
+          } },
+          { name: 'Help', onClick: () => {
+            console.log('Help');
+          } },
         ],
       },
     ],
-    onSignOut: () => { console.log('Sign out'); },
+    onSignOut: () => {
+      console.log('Sign out');
+    },
   },
 };
 
@@ -123,7 +147,9 @@ export const Minimal: Story = {
       avatarInitials: 'CM',
       avatarAlt: 'Christine Montgomery',
     },
-    onSignOut: () => { console.log('Sign out'); },
+    onSignOut: () => {
+      console.log('Sign out');
+    },
   },
 };
 
@@ -144,7 +170,9 @@ export const WithMenu: Story = {
           {
             logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
             name: 'Arbor Workflows',
-            onClick: () => { console.log('Open Arbor Workflows'); },
+            onClick: () => {
+              console.log('Open Arbor Workflows');
+            },
           },
         ],
       },
@@ -152,12 +180,20 @@ export const WithMenu: Story = {
     userInfoAction: {
       type: 'menu',
       items: [
-        { label: 'Help centre', onClick: () => { console.log('Help centre'); } },
-        { label: 'About', onClick: () => { console.log('About'); } },
-        { label: 'Leave feedback', onClick: () => { console.log('Leave feedback'); } },
+        { label: 'Help centre', onClick: () => {
+          console.log('Help centre');
+        } },
+        { label: 'About', onClick: () => {
+          console.log('About');
+        } },
+        { label: 'Leave feedback', onClick: () => {
+          console.log('Leave feedback');
+        } },
       ],
     },
-    onSignOut: () => { console.log('Sign out'); },
+    onSignOut: () => {
+      console.log('Sign out');
+    },
     signOutLabel: 'Sign out of Arbor',
   },
 };
@@ -180,12 +216,16 @@ export const DarkVariant: Story = {
           {
             logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
             name: 'Arbor Workflows',
-            onClick: () => { console.log('Open Arbor Workflows'); },
+            onClick: () => {
+              console.log('Open Arbor Workflows');
+            },
           },
         ],
       },
     ],
-    onSignOut: () => { console.log('Sign out'); },
+    onSignOut: () => {
+      console.log('Sign out');
+    },
     signOutLabel: 'Sign out of Arbor',
   },
   parameters: {
@@ -216,12 +256,16 @@ export const LightVariant: Story = {
           {
             logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
             name: 'Arbor Workflows',
-            onClick: () => { console.log('Open Arbor Workflows'); },
+            onClick: () => {
+              console.log('Open Arbor Workflows');
+            },
           },
         ],
       },
     ],
-    onSignOut: () => { console.log('Sign out'); },
+    onSignOut: () => {
+      console.log('Sign out');
+    },
     signOutLabel: 'Sign out of Arbor',
   },
   parameters: {

package/src/components/userDropdown/internal/UserDropdownCollapsibleSection.tsx

@@ -18,7 +18,9 @@ export const UserDropdownCollapsibleSection = (props: UserDropdownCollapsibleSec
     <div className="ds-user-dropdown__collapsible-section">
       <div
         className="ds-user-dropdown__collapsible-section-header"
-        onClick={() => { setIsOpen(!isOpen); }}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
         role="button"
         tabIndex={0}
         aria-expanded={isOpen}

package/src/utils/getTextContrast.ts

@@ -4,8 +4,12 @@ export const getTextContrast = (color: string): TextContrast => {
   const CONTRAST_THRESHOLD = 128;
 
   let hex = color.trim().replace('#', '');
-  if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
-  if (hex.length !== 6 || /[^0-9a-f]/i.test(hex)) return 'dark';
+  if (hex.length === 3) {
+    hex = hex.split('').map(c => c + c).join('');
+  }
+  if (hex.length !== 6 || /[^0-9a-f]/i.test(hex)) {
+    return 'dark';
+  }
   const r = parseInt(hex.slice(0, 2), 16);
   const g = parseInt(hex.slice(2, 4), 16);
   const b = parseInt(hex.slice(4, 6), 16);

package/src/utils/hooks/useElementWidth.ts

@@ -25,7 +25,9 @@ export const useElementWidth = (
   }, [update, watchKey]);
 
   useLayoutEffect(() => {
-    if (!element) return;
+    if (!element) {
+      return;
+    }
 
     const observer = new ResizeObserver(update);
     observer.observe(element);

package/src/utils/hooks/useMeasuredChildWidths.ts

@@ -7,7 +7,9 @@ type MeasuredChildWidths = {
 };
 
 const getTrackGap = (trackElement: HTMLElement | null): number => {
-  if (!trackElement) return 0;
+  if (!trackElement) {
+    return 0;
+  }
 
   const styles = getComputedStyle(trackElement);
   const parsedGap = Number.parseFloat(styles.columnGap || styles.gap || '0');
@@ -15,7 +17,9 @@ const getTrackGap = (trackElement: HTMLElement | null): number => {
 };
 
 const getChildWidths = (trackElement: HTMLElement | null): number[] => {
-  if (!trackElement) return [];
+  if (!trackElement) {
+    return [];
+  }
 
   return Array.from(trackElement.children).map((child) => {
     const width = (child as HTMLElement).getBoundingClientRect().width;

package/src/utils/hooks/useRovingFocus.ts

@@ -49,7 +49,9 @@ export const useRovingFocus = <Target extends string>({
 
   const queueFocusRecovery = useCallback((target: Target) => {
     const targetIndex = targets.indexOf(target);
-    if (targetIndex < 0) return;
+    if (targetIndex < 0) {
+      return;
+    }
 
     pendingFocusRecoveryRef.current = { targetIndex };
   }, [targets]);
@@ -69,7 +71,9 @@ export const useRovingFocus = <Target extends string>({
 
   useLayoutEffect(() => {
     const pendingFocusRecovery = pendingFocusRecoveryRef.current;
-    if (!pendingFocusRecovery) return;
+    if (!pendingFocusRecovery) {
+      return;
+    }
 
     pendingFocusRecoveryRef.current = null;
 
@@ -87,7 +91,9 @@ export const useRovingFocus = <Target extends string>({
   }, [moveFocus, returnFocusRef, setActiveTarget, targets]);
 
   useLayoutEffect(() => () => {
-    if (!pendingFocusRecoveryRef.current) return;
+    if (!pendingFocusRecoveryRef.current) {
+      return;
+    }
 
     pendingFocusRecoveryRef.current = null;
     returnFocusRefRef.current?.current?.focus();
@@ -95,7 +101,9 @@ export const useRovingFocus = <Target extends string>({
 
   const handleTargetKeyDown = useCallback((event: React.KeyboardEvent<HTMLElement>, target: Target) => {
     const targetIndex = targets.indexOf(target);
-    if (targetIndex < 0) return;
+    if (targetIndex < 0) {
+      return;
+    }
 
     switch (event.key) {
       case 'ArrowLeft':

package/src/utils/spacedWidths.ts

@@ -4,7 +4,9 @@ export const sumSpacedWidths = (
   visibleCount: number = widths.length,
 ): number => {
   const boundedCount = Math.max(0, Math.min(visibleCount, widths.length));
-  if (boundedCount === 0) return 0;
+  if (boundedCount === 0) {
+    return 0;
+  }
 
   let usedWidth = 0;
   for (let index = 0; index < boundedCount; index += 1) {
@@ -22,13 +24,17 @@ export const fitSpacedWidths = (
   widths: number[],
   gap: number,
 ): number => {
-  if (availableWidth <= 0 || widths.length === 0) return 0;
+  if (availableWidth <= 0 || widths.length === 0) {
+    return 0;
+  }
 
   let usedWidth = 0;
   let visibleCount = 0;
   for (let index = 0; index < widths.length; index += 1) {
     const requiredWidth = (widths[index] ?? 0) + (index > 0 ? gap : 0);
-    if (usedWidth + requiredWidth > availableWidth) break;
+    if (usedWidth + requiredWidth > availableWidth) {
+      break;
+    }
     usedWidth += requiredWidth;
     visibleCount += 1;
   }