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

package/src/components/toggleGroup/toggleGroup.scss

@@ -0,0 +1,43 @@
+.ds-toggle-group {
+  display: inline-flex;
+  border-radius: var(--border-radius-round);
+  border: var(--toggle-weight-border) solid var(--color-grey-100);
+  padding: var(--border-radius-small);
+  gap: 8px;
+  align-items: center;
+
+  .ds-toggle-group__item {
+    &--red {
+      background-color: var(--color-semantic-destructive-100);
+      color: var(--color-semantic-destructive-700);
+
+      &:focus,
+      &:hover {
+        background-color: var(--color-semantic-destructive-100);
+        color: var(--color-semantic-destructive-700);
+      }
+    }
+
+    &--yellow {
+      background-color: var(--color-semantic-caution-100);
+      color: var(--color-semantic-caution-700);
+
+      &:focus,
+      &:hover {
+        background-color: var(--color-semantic-caution-100);
+        color: var(--color-semantic-caution-700);
+      }
+    }
+
+    &--green {
+      background-color: var(--color-semantic-success-100);
+      color: var(--color-semantic-success-700);
+
+      &:focus,
+      &:hover {
+        background-color: var(--color-semantic-success-100);
+        color: var(--color-semantic-success-700);
+      }
+    }
+  }
+}

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/index.scss

@@ -53,6 +53,7 @@
 @use "components/row/row.scss";
 @use "components/combobox/combobox.scss";
 @use "components/toggle/toggle.scss";
+@use "components/toggleGroup/toggleGroup.scss";
 @use "components/dataViewCard/dataViewCard.scss";
 @use "components/treeRow/treeRow.scss";
 @use "components/sidebarNav/sidebarNav.scss";

package/src/index.ts

@@ -74,6 +74,7 @@ export { TagList } from 'Components/tagList/TagList';
 export type { TagListItem, TagListOverflowRenderArgs, TagListOverflowTarget, TagListProps } from 'Components/tagList/TagList';
 export { Toast } from 'Components/toast/Toast';
 export { Toggle } from 'Components/toggle/Toggle';
+export { ToggleGroup } from 'Components/toggleGroup/ToggleGroup';
 export { Tooltip } from 'Components/tooltip/Tooltip';
 export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
 export { GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';

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;
   }