@arbor-education/design-system.components 0.5.4 → 0.6.0

package/src/components/table/Table.test.tsx

@@ -4,7 +4,7 @@ import { Table, TABLE_SPACING } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
 import { HideColumnsDropdown } from 'Components/table/HideColumnsDropdown';
-import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
+import { TableSettingsDropdown } from './TableSettingsDropdown';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
 import * as focusFirstFocusableElementModule from 'Utils/focusFirstFocusableElement';

package/src/components/table/Table.tsx

@@ -23,6 +23,7 @@ import { tidyTheme } from './theme/tidyTheme';
 import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
+import { TableSettingsDropdown } from './TableSettingsDropdown';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -217,3 +218,4 @@ Table.BulkActionsDropdown = BulkActionsDropdown;
 Table.HideColumnsDropdown = HideColumnsDropdown;
 Table.ButtonCellRenderer = ButtonCellRenderer;
 Table.DefaultValueFormatter = defaultValueFormatter;
+Table.TableSettingsDropdown = TableSettingsDropdown;

package/src/components/table/{pagination/TableSettingsDropdown.tsx → TableSettingsDropdown.tsx}

@@ -4,7 +4,7 @@ import { CheckboxGroup } from 'Components/formField/inputs/checkbox/CheckboxGrou
 import { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
 import { Separator } from 'Components/separator/Separator';
 import { useContext, type ChangeEvent } from 'react';
-import { TABLE_SPACING, TableSettingsContext } from '../Table';
+import { TABLE_SPACING, TableSettingsContext } from './Table';
 
 const TABLE_SPACING_NAMES = {
   XS: 'X-Small',

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.tsx

@@ -1,18 +1,35 @@
 import { useState } from 'react';
-import type { CellKeyDownEvent, FullWidthCellKeyDownEvent } from 'ag-grid-community';
+import type {
+  CellKeyDownEvent,
+  FullWidthCellKeyDownEvent,
+} from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import type { SelectDropdownItemProps } from 'Components/formField/inputs/selectDropdown/items/item/SelectDropdownItem';
-import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
+import {
+  SelectDropdown,
+  type SelectDropdownInputProps,
+} from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 
-type SelectDropdownCellRendererProps = CustomCellRendererProps & {
-  options?: SelectDropdownItemProps[];
-  placeholder?: string;
-};
+type SelectDropdownCellRendererProps = CustomCellRendererProps
+  & SelectDropdownInputProps;
 
-export const SelectDropdownCellRenderer = (props: SelectDropdownCellRendererProps) => {
-  const { value, placeholder = 'Select', node, column, api } = props;
-  const options = props.options ?? [];
+export const SelectDropdownCellRenderer = (
+  props: SelectDropdownCellRendererProps,
+) => {
+  const {
+    value,
+    placeholder = 'Select',
+    node,
+    column,
+    api,
+    options = [],
+    disabled,
+    hasError,
+    id,
+    'aria-describedBy': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    alwaysShowPlaceholder = false,
+  } = props;
 
   const valueStr = value != null && value !== '' ? String(value) : '';
   const initialSelectedValues = valueStr ? [valueStr] : [];
@@ -20,8 +37,15 @@ export const SelectDropdownCellRenderer = (props: SelectDropdownCellRendererProp
   const [isOpen, setIsOpen] = useState(false);
 
   useComponentDidMount(() => {
-    const handleCellKeyDown = (event: CellKeyDownEvent | FullWidthCellKeyDownEvent) => {
-      if ('column' in event && event.node === node && event.column === column && (event.event as KeyboardEvent).key === 'Enter') {
+    const handleCellKeyDown = (
+      event: CellKeyDownEvent | FullWidthCellKeyDownEvent,
+    ) => {
+      if (
+        'column' in event
+        && event.node === node
+        && event.column === column
+        && (event.event as KeyboardEvent).key === 'Enter'
+      ) {
         setIsOpen(true);
       }
     };
@@ -35,6 +59,12 @@ export const SelectDropdownCellRenderer = (props: SelectDropdownCellRendererProp
   return (
     <div className="ds-table__select-dropdown">
       <SelectDropdown
+        disabled={disabled}
+        hasError={hasError}
+        id={id}
+        aria-describedBy={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
+        alwaysShowPlaceholder={alwaysShowPlaceholder}
         options={options}
         placeholder={placeholder}
         initialSelectedValues={initialSelectedValues}

package/src/global.scss

@@ -26,11 +26,11 @@
   text-rendering: optimizeLegibility;
 }
 
-body {
-  *[class^='ds-'], *[class*=' ds-'] {
-    font-family: var(--font-family-standard);
-    font-size: var(--type-body-p-size);
-    font-weight: var(--font-weight-regular);
-    box-sizing: border-box;
-  }
-}
+
+*[class^='ds-'],
+*[class*=' ds-'] { 
+  font-family: var(--font-family-standard);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--font-weight-regular);
+  box-sizing: border-box;
+}

package/src/index.scss

@@ -35,5 +35,6 @@
 @use "components/toast/toast.scss";
 @use "components/datePicker/datePicker.scss";
 @use "components/avatar/avatar.scss";
+@use "components/avatarGroup/avatarGroup.scss";
 @use "components/userDropdown/userDropdown.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

@@ -32,6 +32,13 @@ export { Progress } from 'Components/progress/Progress';
 export { Toast } from 'Components/toast/Toast';
 export { DatePicker } from 'Components/datePicker/DatePicker';
 export { Avatar } from 'Components/avatar/Avatar';
+export {
+  AvatarGroup,
+  type AvatarGroupItem,
+  type AvatarGroupListOrder,
+  type AvatarGroupOverflowCountProps,
+  type AvatarGroupProps,
+} from 'Components/avatarGroup/AvatarGroup';
 export { UserDropdown } from 'Components/userDropdown/UserDropdown';
 export { SearchBar } from 'Components/searchBar/SearchBar';
 export type { UserDropdownUserInfoAction } from 'Components/userDropdown/UserDropdown';

package/src/tokens.scss

@@ -157,6 +157,8 @@
   --avatar-small-size: 1.25rem;
   --avatar-medium-size: 2rem;
   --avatar-extra-large-size: 6rem;
+  --avatar-group-overlap: -2px;
+  --avatar-group-overflow-count-font-size: 0.8125rem;
   --border-weight: 1px;
   --page-base-color-border: var(--color-grey-050);
   --widget-notifications-read-color: #ffffff;

package/tokens/json/Arbor.json

@@ -1793,6 +1793,18 @@
       }
     }
   },
+  "avatar-group": {
+    "overlap": {
+      "$type": "dimension",
+      "$value": "-2px"
+    },
+    "overflow-count": {
+      "font-size": {
+        "$type": "dimension",
+        "$value": "0.8125rem"
+      }
+    }
+  },
   "banner": {
     "info": {
       "color-icon": {
@@ -6326,4 +6338,4 @@
       "$value": "{spacing.small}"
     }
   }
-}
+}

package/dist/components/table/pagination/TableSettingsDropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableSettingsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/table/pagination/TableSettingsDropdown.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,qBAAqB,+CA0EjC,CAAC"}

package/dist/components/table/pagination/TableSettingsDropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableSettingsDropdown.js","sourceRoot":"","sources":["../../../../src/components/table/pagination/TableSettingsDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,oDAAoD,CAAC;AACnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAoB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,mBAAmB,GAAG;IAC1B,EAAE,EAAE,SAAS;IACb,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,OAAO;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,EACJ,QAAQ,EAAE,EACR,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,GACrB,EACD,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,uBAAuB,GACxB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAErC,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,QAAQ,CAAC,OAAO,cACf,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,aAAa,EAAC,UAAU,EACxB,yBAAyB,EAAC,gBAAgB,EAC1C,UAAU,SACV,GACe,EACnB,MAAC,QAAQ,CAAC,OAAO,eACf,KAAC,gBAAgB,IACf,MAAM,EAAC,eAAe,EACtB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;4BACnD,OAAO;gCACL,IAAI,EAAE,kBAAkB;gCACxB,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC;gCAClC,KAAK,EAAE,MAAM;6BACd,CAAC;wBACJ,CAAC,CAAC,EACF,IAAI,EAAC,kBAAkB,EACvB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAsB,CAAC,CAAC;wBACnD,CAAC,GACD,EAEF,KAAC,SAAS,KAAG,EAEb,KAAC,aAAa,IACZ,MAAM,EAAC,OAAO,EACd,OAAO,EAAE;4BACP;gCACE,KAAK,EAAE,gBAAgB;gCACvB,OAAO,EAAE,gBAAgB;gCACzB,QAAQ,EAAE,GAAG,EAAE;oCACb,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;gCACzC,CAAC;6BACF;4BACD;gCACE,KAAK,EAAE,cAAc;gCACrB,OAAO,EAAE,oBAAoB;gCAC7B,QAAQ,EAAE,GAAG,EAAE;oCACb,uBAAuB,CAAC,CAAC,oBAAoB,CAAC,CAAC;gCACjD,CAAC;6BACF;yBACF,GACD,EAEF,KAAC,SAAS,KAAG,EAEb,KAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,YAAY,EAAC,MAAM,EACnB,OAAO,EAAE,aAAa,qCAGf,IACQ,IACV,CACZ,CAAC;AACJ,CAAC,CAAC"}