@arbor-education/design-system.components 0.1.2 → 0.1.3

package/src/components/formField/inputs/selectDropdown/SelectDropdown.test.tsx

@@ -138,7 +138,7 @@ describe('SelectDropdown component', () => {
         onSelectionChange={vi.fn()}
         placeholder="Select"
         disabled={false}
-        errorText="Something went wrong"
+        hasError
         options={[{ label: 'Label 1', value: 'label1' }]}
       />,
     );

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -5,25 +5,33 @@ import { Dropdown } from 'Components/dropdown/Dropdown';
 import { Button } from 'Components/button/Button';
 
 export type SelectDropdownInputProps = {
-  placeholder?: string;
-  options: SelectDropdownItemProps[];
-  multiple?: boolean;
-  disabled?: boolean;
-  errorText?: string;
-  onSelectionChange: (value: string[]) => void;
+  'placeholder'?: string;
+  'options': SelectDropdownItemProps[];
+  'multiple'?: boolean;
+  'disabled'?: boolean;
+  'hasError'?: boolean;
+  'aria-describedBy'?: string;
+  'aria-invalid'?: boolean;
+  'onSelectionChange'?: (value: string[]) => void;
+  'id'?: string;
+  'alwaysShowPlaceholder'?: boolean;
 };
 
 export const SelectDropdown = (props: SelectDropdownInputProps) => {
-  const { options, disabled, multiple, placeholder, errorText, onSelectionChange } = props;
+  const { options, disabled, multiple, placeholder, hasError, onSelectionChange, id, 'aria-describedBy': ariaDescribedBy, 'aria-invalid': ariaInvalid, alwaysShowPlaceholder = false } = props;
 
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const [renderedSelectContent, setRenderedSelectContent] = useState('');
 
   useEffect(() => {
-    onSelectionChange(selectedValues);
+    onSelectionChange?.(selectedValues);
   }, [selectedValues]);
 
   useEffect(() => {
+    if (alwaysShowPlaceholder) {
+      setRenderedSelectContent(placeholder ?? 'Select');
+      return;
+    }
     if (selectedValues.length === 0) {
       setRenderedSelectContent(placeholder ?? 'Select');
     }
@@ -65,38 +73,44 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
   };
 
   return (
-    <Dropdown>
-      <Dropdown.Trigger disabled={disabled}>
-        <Button
-          variant="dropdown"
-          error={!!errorText}
-          iconRightName="chevron-down"
-        >
-          {renderedSelectContent}
-        </Button>
-      </Dropdown.Trigger>
-      <Dropdown.Content>
-        {flatOptions.map(item =>
-          'headerLabel' in item
-            ? (
-                <h3 key={`${item.headerLabel}-header`} className="ds-select-dropdown__items--header">
-                  {item.headerLabel}
-                </h3>
-              )
-            : (
-                <SelectDropdownItem
-                  value={item.value}
-                  header={item.header}
-                  label={item.label}
-                  icon={item.icon}
-                  key={item.value}
-                  onSelection={handleItemClick}
-                  selected={selectedValues.includes(item.value)}
-                  closeAfterSelection={!multiple}
-                />
-              ),
-        )}
-      </Dropdown.Content>
-    </Dropdown>
+    <>
+      <input type="hidden" name={id} value={selectedValues.join(',')} />
+      <Dropdown>
+        <Dropdown.Trigger disabled={disabled}>
+          <Button
+            variant="dropdown"
+            error={hasError}
+            iconRightName="chevron-down"
+            id={id}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={ariaInvalid}
+          >
+            {renderedSelectContent}
+          </Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          {flatOptions.map(item =>
+            'headerLabel' in item
+              ? (
+                  <h3 key={`${item.headerLabel}-header`} className="ds-select-dropdown__items--header">
+                    {item.headerLabel}
+                  </h3>
+                )
+              : (
+                  <SelectDropdownItem
+                    value={item.value}
+                    header={item.header}
+                    label={item.label}
+                    icon={item.icon}
+                    key={item.value}
+                    onSelection={handleItemClick}
+                    selected={selectedValues.includes(item.value)}
+                    closeAfterSelection={!multiple}
+                  />
+                ),
+          )}
+        </Dropdown.Content>
+      </Dropdown>
+    </>
   );
 };

package/src/components/heading/heading.scss

@@ -7,6 +7,7 @@
   justify-content: space-between;
   box-sizing: border-box;
   align-items: center;
+  margin: 0;
 
   &__inner-container {
     display: flex;

package/src/components/icon/Icon.tsx

@@ -8,7 +8,6 @@ type IconProps = {
   screenReaderText?: string;
   name: IconName;
   className?: string;
-  ariaLabel?: string;
 };
 
 export const Icon = (props: IconProps) => {
@@ -18,7 +17,7 @@ export const Icon = (props: IconProps) => {
   return (
     <>
       {/* why aria-hidden? https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/ */}
-      <Component size={size} color={color} className={classes} role="img" aria-hidden="true" />
+      <Component size={size} color={color} className={classes} role="img" aria-hidden />
       {!!screenReaderText && (
         <span className="sr-only">{screenReaderText}</span>
       )}

package/src/components/searchBar/SearchBar.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { SearchBar } from './SearchBar';
+import userEvent from '@testing-library/user-event';
+
+const setSearchMock = vi.fn();
+
+describe('SearchBar component', () => {
+  beforeEach(() => {
+    setSearchMock.mockClear();
+  });
+
+  test('renders search bar with placeholder text', () => {
+    render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search for something" />);
+    expect(screen.getByText('Search for something')).toBeInTheDocument();
+  });
+
+  test('renders search bar with icon only', () => {
+    render(<SearchBar setSearchValue={setSearchMock} />);
+    expect(screen.getByTestId('search-bar-inactive')).toHaveClass('ds-search-bar--inactive-icon-only');
+  });
+
+  test('runs setSearch when input changes', async () => {
+    render(<SearchBar setSearchValue={setSearchMock} />);
+    await userEvent.click(screen.getByTestId('search-bar-inactive'));
+    const input = screen.getByLabelText('Search input');
+    fireEvent.change(input, { target: { value: 'Hello' } });
+    expect(setSearchMock).toHaveBeenCalledTimes(1);
+    expect(setSearchMock).toHaveBeenCalledWith('Hello');
+  });
+
+  test('runs handleClear when clear button is clicked', async () => {
+    render(<SearchBar setSearchValue={setSearchMock} />);
+    await userEvent.click(screen.getByTestId('search-bar-inactive'));
+    await userEvent.click(screen.getByRole('button', { name: 'Clear search' }));
+    expect(setSearchMock).toHaveBeenCalledTimes(1);
+    expect(setSearchMock).toHaveBeenCalledWith('');
+  });
+});

package/src/components/searchBar/SearchBar.tsx

@@ -0,0 +1,97 @@
+import classNames from 'classnames';
+import { Button } from 'Components/button/Button';
+import { Icon } from 'Components/icon/Icon';
+import { useRef, useState } from 'react';
+
+type SearchBarProps = {
+  searchValue?: string;
+  setSearchValue?: (searchValue: string) => void;
+  placeholderText?: string;
+};
+
+export const SearchBar = (props: SearchBarProps) => {
+  const { searchValue, setSearchValue, placeholderText } = props;
+
+  const [isSearchVisible, setIsSearchVisible] = useState(!!searchValue);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue?.(event.target.value);
+  };
+
+  const handleClear = () => {
+    setSearchValue?.('');
+    setIsSearchVisible(false);
+  };
+
+  const handleSearchIconClick = () => {
+    setIsSearchVisible(true);
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 0);
+  };
+
+  const handleClearKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClear();
+    }
+  };
+
+  if (!isSearchVisible) {
+    return (
+      <Button
+        data-testid="search-bar-inactive"
+        className={
+          classNames('ds-search-bar--inactive', {
+            'ds-search-bar--inactive-icon-only': !placeholderText,
+            'ds-search-bar--inactive-with-placeholder': placeholderText,
+          })
+        }
+        onClick={handleSearchIconClick}
+      >
+        <Icon
+          name="search"
+          size={16}
+          color="var(--search-global-default-color-icon)"
+          className="ds-search-bar__icon"
+        />
+        {placeholderText
+          && (
+            <span className="ds-search-bar--inactive__placeholder">
+              {placeholderText}
+            </span>
+          )}
+      </Button>
+    );
+  }
+
+  return (
+    <span className="ds-search-bar">
+      <Icon
+        name="search"
+        size={16}
+        className="ds-search-bar__icon"
+        screenReaderText="Search icon"
+      />
+      <input
+        value={searchValue ?? ''}
+        onChange={handleSearch}
+        className="ds-search-bar__input"
+        type="text"
+        ref={searchInputRef}
+        aria-label="Search input"
+      />
+      <span
+        className="ds-search-bar__clear-container"
+        role="button"
+        tabIndex={0}
+        onClick={handleClear}
+        onKeyDown={handleClearKeyDown}
+        aria-label="Clear search"
+      >
+        <Icon name="x" size={12} className="ds-search-bar__clear" />
+      </span>
+    </span>
+  );
+};

package/src/components/searchBar/searchBar.scss

@@ -0,0 +1,69 @@
+.ds-search-bar__icon {
+    color: var(--search-global-default-color-icon);
+}
+
+.ds-search-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--search-global-spacing-horizontal-gap);
+    border-radius: var(--search-global-radius);
+    background: var(--search-global-default-color-background);
+    padding: var(--search-global-spacing-vertical) var(--search-global-spacing-horizontal);
+
+    &:focus-within {
+        background: var(--search-global-focus-color-background);
+        box-shadow: 0 0 0 3px var(--color-brand-500);
+
+        .ds-search-bar__icon {
+            color: var(--search-global-focus-color-icon);
+        }
+    }
+}
+
+.ds-search-bar__clear {
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.ds-search-bar__input {
+    color: var(--search-global-default-color-text);
+    background-color: var(--search-global-default-color-background);
+    border: none;
+
+    &:focus { 
+        outline: none;
+    }
+}
+
+.ds-search-bar--inactive {
+    display: flex;
+    cursor: pointer;
+    width: fit-content;
+    height: fit-content;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: var(--search-global-spacing-vertical) var(--search-global-spacing-horizontal);
+    gap: var(--search-global-spacing-horizontal-gap);
+
+    &__placeholder {
+      color: var(--search-global-default-color-text);
+      font-family: var(--type-body-p-family);
+      font-size: var(--type-body-p-size);
+      font-weight: var(--type-body-p-weight);
+    }
+
+    &-icon-only {
+      padding: var(--search-global-spacing-vertical);
+    }
+
+    &:hover {
+        background: var(--search-global-hover-color-background);
+
+        .ds-search-bar__icon {
+            color: var(--search-global-hover-color-icon);
+        }
+    }
+}

package/src/components/slideover/Slideover.tsx

@@ -12,18 +12,23 @@ export type SlideoverProps = {
   footerContents?: ReactNode;
   headerIcon?: IconName;
   centerHeaderText?: boolean;
+  hideBackButton?: boolean;
 };
 
 export const Slideover = (props: SlideoverProps) => {
-  const { title, children, footerContents, headerIcon, centerHeaderText = true } = props;
+  const { title, children, footerContents, headerIcon, centerHeaderText = true, hideBackButton } = props;
 
   return (
     <aside className="ds-slideover">
       <div className={classNames('ds-slideover__header', { 'ds-slideover__header--center': centerHeaderText })}>
-        <Button variant="tertiary" onClick={SlideoverUtils.removeSlideover}>
-          <Icon name="chevrons-left" />
-          Back
-        </Button>
+        {
+          !hideBackButton && (
+            <Button variant="tertiary" onClick={SlideoverUtils.removeSlideover}>
+              <Icon name="chevrons-left" />
+              Back
+            </Button>
+          )
+        }
         <Heading level={2}>
           {title}
           {headerIcon && <Icon name={headerIcon} />}

package/src/components/table/HideColumnsDropdown.tsx

@@ -0,0 +1,57 @@
+import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
+import { useContext, useState } from 'react';
+import { GridApiContext } from './GridApiContext';
+import type { Column } from 'ag-grid-community';
+
+type HideColumnsDropdownProps = {
+  columns?: Column[];
+  onSelectionChanged?: (cols: string[]) => void;
+  overrideColumnHiding?: boolean;
+};
+
+export const HideColumnsDropdown = (props: HideColumnsDropdownProps) => {
+  const {
+    columns: rawColumns,
+    onSelectionChanged,
+    overrideColumnHiding = false,
+  } = props;
+
+  const gridApi = useContext(GridApiContext);
+  const currentColumns = rawColumns || gridApi?.getColumns();
+  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
+
+  if (!currentColumns || currentColumns.length === 0) return null;
+
+  const options = currentColumns.map(column => ({
+    label: column.getColDef().headerName,
+    selected: column.isVisible(),
+    value: column.getColId(),
+  }));
+
+  const handleVisibilityChange = (columnsToHide: string[]) => {
+    if (onSelectionChanged) {
+      onSelectionChanged(columnsToHide);
+    }
+    setHiddenColumns(columnsToHide);
+    if (!overrideColumnHiding) {
+      const columnsToShow = currentColumns.filter((col) => {
+        return !columnsToHide.includes(col.getColId());
+      });
+
+      gridApi?.setColumnsVisible(columnsToHide, false);
+      gridApi?.setColumnsVisible(columnsToShow, true);
+    }
+  };
+
+  const placeholderText = hiddenColumns.length > 0 ? `Hide (${hiddenColumns.length})` : 'Hide Columns';
+
+  return (
+    <SelectDropdown
+      multiple
+      placeholder={placeholderText}
+      options={options}
+      onSelectionChange={handleVisibilityChange}
+      alwaysShowPlaceholder
+    />
+  );
+};

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { ColDef, ColGroupDef } from 'ag-grid-enterprise';
+import { type Column, type ColDef, type ColGroupDef } from 'ag-grid-enterprise';
 import { Table } from './Table';
 import { Button } from 'Components/button/Button';
 import { Icon } from 'Components/icon/Icon';
@@ -8,6 +8,7 @@ import { BulkActionsDropdown } from './BulkActionsDropdown';
 import { useState, type ComponentProps } from 'react';
 import { RowCountInfo } from './pagination/RowCountInfo';
 import { PaginationPanel } from './pagination/PaginationPanel';
+import { HideColumnsDropdown } from './HideColumnsDropdown';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -62,7 +63,6 @@ const HeaderContent = [
     <Button key={1} variant="secondary" size="S">Button 2</Button>
   </div>,
   <div key={1} style={{ display: 'flex', gap: '1rem' }}>
-    <Icon name="search" />
     <Icon name="download" />
     <Icon name="settings" />
     <Icon name="circle-help" />
@@ -105,6 +105,17 @@ export const WithHeader: Story = {
   },
 };
 
+export const WithHeaderAndNoSearch: Story = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    headerContent: HeaderContent,
+    hasSearch: false,
+  },
+};
+
 export const WithHeaderAndFooter: Story = {
   args: {
     rowData: sampleData,
@@ -142,6 +153,89 @@ export const WithBulkActions: Story = {
   },
 };
 
+export const WithHideColumnsDropdown: Story = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    overrideColumnHiding: false,
+  },
+  render: (args) => {
+    const {
+      rowData,
+      columnDefs,
+      defaultColDef,
+      domLayout,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      overrideColumnHiding,
+    } = args;
+
+    return (
+      <Table
+        rowData={rowData}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        domLayout={domLayout}
+        headerContent={(
+          <HideColumnsDropdown
+            overrideColumnHiding={overrideColumnHiding}
+            onSelectionChanged={console.log}
+          />
+        )}
+      />
+    );
+  },
+};
+
+export const WithRestrictedHideColumnsDropdown: Story = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    overrideColumnHiding: false,
+  },
+  render: (args) => {
+    const {
+      rowData,
+      columnDefs,
+      defaultColDef,
+      domLayout,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      overrideColumnHiding,
+    } = args;
+
+    const [columns, setColumns] = useState<Column[]>([]);
+
+    return (
+      <Table
+        rowData={rowData}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        domLayout={domLayout}
+        onGridReady={(params) => {
+          const { api } = params;
+          setColumns(api.getColumns()?.slice(1) || []);
+        }}
+        headerContent={(
+          <HideColumnsDropdown
+            overrideColumnHiding={overrideColumnHiding}
+            onSelectionChanged={console.log}
+            columns={columns}
+          />
+        )}
+      />
+    );
+  },
+};
+
 export const WithClientSidePagination: StoryObj<TableProps> = {
   args: {
     rowData: sampleData,