@axinom/mosaic-ui 0.75.0-rc.5 → 0.77.0

package/src/components/PageHeader/PageHeader.module.scss

@@ -3,13 +3,16 @@
 .container {
   @include boxSizing;
 
-  height: $page-header-height;
   display: grid;
-  grid-template-columns: minmax(30%, 1fr) auto;
-  grid-template-rows: 1fr;
+  // Actions that do not fit overflow their column rather than widening the
+  // grid, which keeps the action bar spanning the columns as wide as the header.
+  grid-template-columns: minmax(30%, 1fr) minmax(0, auto);
+  // The titles and the actions share the first row. The action bar of an open
+  // actions group takes a row of its own below them.
+  grid-template-rows: $page-header-height;
 
   @media only screen and (min-width: $XL-min-size) {
-    grid-template-columns: minmax(25%, 1fr) max-content max-content;
+    grid-template-columns: minmax(25%, 1fr) repeat(2, minmax(0, max-content));
   }
 
   color: var(--page-header-color, $page-header-color);
@@ -18,28 +21,38 @@
     $page-header-background-color
   );
 
+  // Centered vertically, so that a title without a subtitle sits in the middle
+  // of the header.
   .titles {
+    min-width: 0;
+
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: max-content max-content;
+    align-content: center;
+    row-gap: 4px;
 
-    padding: 0px 30px;
+    padding: 0 var(--page-header-padding, $page-header-padding);
 
     .title {
-      justify-items: start;
-
-      margin-top: 15px;
-
-      font-size: 30px;
+      font-size: var(
+        --page-header-title-font-size,
+        $page-header-title-font-size
+      );
+      line-height: 1.2;
     }
 
     .subtitle {
-      justify-items: start;
-
-      margin-top: 12px;
-
       color: var(--page-header-subtitle-color, $page-header-subtitle-color);
-      font-size: 16px;
+      font-size: var(
+        --page-header-subtitle-font-size,
+        $page-header-subtitle-font-size
+      );
+      line-height: 1.2;
+
+      // Takes no room without a subtitle, which would push the title up.
+      &:empty {
+        display: none;
+      }
     }
 
     .title,
@@ -53,11 +66,19 @@
   .actions {
     display: grid;
     grid-auto-flow: column;
-    grid-gap: 1px;
+    grid-gap: var(--page-header-actions-gap, $page-header-actions-gap);
   }
 
+  // The gaps on both sides of the spacer add to the distance between groups.
   .spacer {
     display: grid;
-    width: 8px;
+    width: calc(
+      var(--page-header-spacer-width, $page-header-spacer-width) - 2 *
+        var(--page-header-actions-gap, $page-header-actions-gap)
+    );
+  }
+
+  .actionBar {
+    grid-column: 1 / -1;
   }
 }

package/src/components/PageHeader/PageHeader.spec.tsx

@@ -1,9 +1,13 @@
-import { render } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 import { noop } from '../../helpers/utils';
 import { PageHeader } from './PageHeader';
-import type { PageHeaderActionItemProps } from './PageHeader.model';
+import type {
+  PageHeaderActionItemProps,
+  PageHeaderProps,
+} from './PageHeader.model';
 import type { PageHeaderActionProps } from './PageHeaderAction';
 
 vi.mock('../../hooks/useTabTitle/useTabTitle');
@@ -15,6 +19,36 @@ const defaultbulkActions: PageHeaderActionProps[] = [
   },
 ];
 
+const renderHeader = (props: PageHeaderProps): ReturnType<typeof render> =>
+  render(
+    <MemoryRouter>
+      <PageHeader {...props} />
+    </MemoryRouter>,
+  );
+
+/** The action on the page header that opens the group with the given label. */
+const groupAction = (label: string): HTMLElement =>
+  within(screen.getByTestId('page-header-actions'))
+    .getByText(label)
+    .closest('[data-test-id="action"]') as HTMLElement;
+
+/** Labels of the actions on the action bar, if the bar is rendered. */
+const barLabels = (): string[] | undefined => {
+  const bar = screen.queryByTestId('action-bar');
+
+  return bar
+    ? within(bar)
+        .getAllByTestId('label')
+        .map((label) => label.textContent ?? '')
+    : undefined;
+};
+
+const clickGroup = async (label: string): Promise<void> => {
+  await act(async () => {
+    fireEvent.click(groupAction(label));
+  });
+};
+
 describe('PageHeader', () => {
   it('renders the component without crashing', () => {
     const { container } = render(<PageHeader />);
@@ -48,22 +82,6 @@ describe('PageHeader', () => {
     expect(action).toBeInTheDocument();
   });
 
-  it(`renders actions groups`, () => {
-    const actions: PageHeaderActionItemProps[] = [
-      {
-        label: 'Bulk Actions',
-        kind: 'group',
-        actions: defaultbulkActions,
-      },
-    ];
-    const { container } = render(<PageHeader actions={actions} />);
-
-    const actionsGroup = container.querySelector(
-      '.page-header-group-action-container',
-    );
-    expect(actionsGroup).toBeInTheDocument();
-  });
-
   it('renders spacers', () => {
     const actions: PageHeaderActionItemProps[] = [
       {
@@ -75,4 +93,375 @@ describe('PageHeader', () => {
     const spacer = container.querySelector('.spacer');
     expect(spacer).toBeInTheDocument();
   });
+
+  describe('actions groups', () => {
+    const bulkGroup: PageHeaderActionItemProps = {
+      label: 'Bulk Actions',
+      kind: 'group',
+      actions: [
+        { label: 'Publish', onClick: noop },
+        { label: 'Delete', onClick: noop },
+      ],
+    };
+
+    const exportGroup: PageHeaderActionItemProps = {
+      label: 'Export',
+      kind: 'group',
+      actions: [{ label: 'Export as CSV', onClick: noop }],
+    };
+
+    it('renders the action of a group, without the action bar while it is closed', () => {
+      renderHeader({ actions: [bulkGroup] });
+
+      expect(groupAction('Bulk Actions')).toHaveAttribute(
+        'aria-pressed',
+        'false',
+      );
+      expect(groupAction('Bulk Actions').classList.contains('context')).toBe(
+        true,
+      );
+      expect(screen.queryByTestId('action-bar')).toBeNull();
+    });
+
+    it('opens the action bar with the actions of the group', async () => {
+      renderHeader({ actions: [bulkGroup] });
+
+      await clickGroup('Bulk Actions');
+
+      expect(barLabels()).toEqual(['Publish', 'Delete']);
+      expect(groupAction('Bulk Actions')).toHaveAttribute(
+        'aria-pressed',
+        'true',
+      );
+      expect(groupAction('Bulk Actions').classList.contains('active')).toBe(
+        true,
+      );
+    });
+
+    it('closes the action bar when the group is clicked again', async () => {
+      renderHeader({ actions: [bulkGroup] });
+
+      await clickGroup('Bulk Actions');
+      await clickGroup('Bulk Actions');
+
+      expect(screen.queryByTestId('action-bar')).toBeNull();
+      expect(groupAction('Bulk Actions')).toHaveAttribute(
+        'aria-pressed',
+        'false',
+      );
+    });
+
+    it('raises onActionsGroupToggled when the group opens and closes', async () => {
+      const onActionsGroupToggled = vi.fn().mockResolvedValue(undefined);
+      renderHeader({ actions: [{ ...bulkGroup, onActionsGroupToggled }] });
+
+      await clickGroup('Bulk Actions');
+      await clickGroup('Bulk Actions');
+
+      expect(onActionsGroupToggled.mock.calls).toEqual([[true], [false]]);
+    });
+
+    it('closes the open group when another group is opened', async () => {
+      const onBulkToggled = vi.fn().mockResolvedValue(undefined);
+      const onExportToggled = vi.fn().mockResolvedValue(undefined);
+      renderHeader({
+        actions: [
+          { ...bulkGroup, onActionsGroupToggled: onBulkToggled },
+          { ...exportGroup, onActionsGroupToggled: onExportToggled },
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+      await clickGroup('Export');
+
+      expect(barLabels()).toEqual(['Export as CSV']);
+      expect(groupAction('Bulk Actions')).toHaveAttribute(
+        'aria-pressed',
+        'false',
+      );
+      expect(groupAction('Export')).toHaveAttribute('aria-pressed', 'true');
+      expect(onBulkToggled.mock.calls).toEqual([[true], [false]]);
+      expect(onExportToggled.mock.calls).toEqual([[true]]);
+    });
+
+    it(`doesn't raise onActionsGroupToggled of groups that are closed`, async () => {
+      const onExportToggled = vi.fn().mockResolvedValue(undefined);
+      renderHeader({
+        actions: [
+          bulkGroup,
+          { ...exportGroup, onActionsGroupToggled: onExportToggled },
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+
+      expect(onExportToggled).not.toHaveBeenCalled();
+    });
+
+    it('stays closed when onActionsGroupToggled rejects the opening', async () => {
+      renderHeader({
+        actions: [
+          {
+            ...bulkGroup,
+            onActionsGroupToggled: vi.fn().mockRejectedValue(new Error()),
+          },
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+
+      expect(screen.queryByTestId('action-bar')).toBeNull();
+    });
+
+    it('stays open when onActionsGroupToggled rejects the closing', async () => {
+      renderHeader({
+        actions: [
+          {
+            ...bulkGroup,
+            onActionsGroupToggled: async (expanded) => {
+              if (!expanded) {
+                throw new Error();
+              }
+            },
+          },
+          exportGroup,
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+      await clickGroup('Bulk Actions');
+
+      expect(barLabels()).toEqual(['Publish', 'Delete']);
+
+      // Opening another group has to close this one first, which it rejects.
+      await clickGroup('Export');
+
+      expect(barLabels()).toEqual(['Publish', 'Delete']);
+    });
+
+    it('closes the open group even if the group that was clicked rejects the opening', async () => {
+      renderHeader({
+        actions: [
+          bulkGroup,
+          {
+            ...exportGroup,
+            onActionsGroupToggled: vi.fn().mockRejectedValue(new Error()),
+          },
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+      await clickGroup('Export');
+
+      expect(screen.queryByTestId('action-bar')).toBeNull();
+    });
+
+    it('opens the group set to openActionsGroupOnStart without raising onActionsGroupToggled', () => {
+      const onActionsGroupToggled = vi.fn().mockResolvedValue(undefined);
+      renderHeader({
+        actions: [
+          bulkGroup,
+          {
+            ...exportGroup,
+            openActionsGroupOnStart: true,
+            onActionsGroupToggled,
+          },
+        ],
+      });
+
+      expect(barLabels()).toEqual(['Export as CSV']);
+      expect(onActionsGroupToggled).not.toHaveBeenCalled();
+    });
+
+    it('opens only the first of several groups set to openActionsGroupOnStart', () => {
+      renderHeader({
+        actions: [
+          { ...bulkGroup, openActionsGroupOnStart: true },
+          { ...exportGroup, openActionsGroupOnStart: true },
+        ],
+      });
+
+      expect(barLabels()).toEqual(['Publish', 'Delete']);
+      expect(groupAction('Export')).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('keeps the group open while actions are added in front of it', async () => {
+      const { rerender } = renderHeader({ actions: [bulkGroup] });
+
+      await clickGroup('Bulk Actions');
+
+      rerender(
+        <MemoryRouter>
+          <PageHeader
+            actions={[
+              { label: 'Undo', kind: 'action', onClick: noop },
+              exportGroup,
+              bulkGroup,
+            ]}
+          />
+        </MemoryRouter>,
+      );
+
+      expect(barLabels()).toEqual(['Publish', 'Delete']);
+      expect(groupAction('Export')).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('closes the action bar when the open group is removed', async () => {
+      const { rerender } = renderHeader({ actions: [bulkGroup] });
+
+      await clickGroup('Bulk Actions');
+
+      rerender(
+        <MemoryRouter>
+          <PageHeader actions={[exportGroup]} />
+        </MemoryRouter>,
+      );
+
+      expect(screen.queryByTestId('action-bar')).toBeNull();
+    });
+
+    it('renders the actionBarLabel on the action bar', async () => {
+      renderHeader({
+        actions: [{ ...bulkGroup, actionBarLabel: 'Selected 3' }],
+      });
+
+      await clickGroup('Bulk Actions');
+
+      expect(screen.getByTestId('action-bar-label')).toHaveTextContent(
+        'Selected 3',
+      );
+    });
+
+    it('renders no label on the action bar by default', async () => {
+      renderHeader({ actions: [bulkGroup] });
+
+      await clickGroup('Bulk Actions');
+
+      expect(screen.queryByTestId('action-bar-label')).toBeNull();
+    });
+
+    it('raises onClick of an action on the action bar', async () => {
+      const onClick = vi.fn();
+      renderHeader({
+        actions: [{ ...bulkGroup, actions: [{ label: 'Publish', onClick }] }],
+      });
+
+      await clickGroup('Bulk Actions');
+      fireEvent.click(
+        within(screen.getByTestId('action-bar')).getByTestId('action'),
+      );
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('disables every action of the group when groupActionsDisabled is set', async () => {
+      renderHeader({ actions: [{ ...bulkGroup, groupActionsDisabled: true }] });
+
+      await clickGroup('Bulk Actions');
+
+      within(screen.getByTestId('action-bar'))
+        .getAllByTestId('action')
+        .forEach((action) => expect(action).toBeDisabled());
+    });
+
+    it('keeps an action disabled on its own disabled', async () => {
+      renderHeader({
+        actions: [
+          {
+            ...bulkGroup,
+            groupActionsDisabled: false,
+            actions: [
+              { label: 'Publish', onClick: noop },
+              { label: 'Delete', disabled: true, onClick: noop },
+            ],
+          },
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+
+      const [publish, remove] = within(
+        screen.getByTestId('action-bar'),
+      ).getAllByTestId('action');
+
+      expect(publish).not.toBeDisabled();
+      expect(remove).toBeDisabled();
+    });
+
+    it('renders link actions of the group as links on the action bar', async () => {
+      renderHeader({
+        actions: [
+          {
+            ...bulkGroup,
+            actions: [{ label: 'Open Export', path: '/export', tag: 'NEW' }],
+          },
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+
+      const action = within(screen.getByTestId('action-bar')).getByTestId(
+        'action',
+      );
+
+      expect(action).toHaveAttribute('href', '/export');
+      expect(within(action).getByTestId('tag')).toHaveTextContent('NEW');
+    });
+
+    it('disables the action of a disabled group', async () => {
+      const onActionsGroupToggled = vi.fn().mockResolvedValue(undefined);
+      renderHeader({
+        actions: [{ ...bulkGroup, disabled: true, onActionsGroupToggled }],
+      });
+
+      expect(groupAction('Bulk Actions')).toBeDisabled();
+
+      await clickGroup('Bulk Actions');
+
+      expect(onActionsGroupToggled).not.toHaveBeenCalled();
+      expect(screen.queryByTestId('action-bar')).toBeNull();
+    });
+
+    it('does not carry a pending confirmation over to another group', async () => {
+      const onExportDelete = vi.fn();
+      renderHeader({
+        actions: [
+          {
+            ...bulkGroup,
+            actions: [
+              { label: 'Delete', confirmationMode: 'Simple', onClick: noop },
+            ],
+          },
+          {
+            ...exportGroup,
+            actions: [
+              {
+                label: 'Delete',
+                confirmationMode: 'Simple',
+                onClick: onExportDelete,
+              },
+            ],
+          },
+        ],
+      });
+
+      await clickGroup('Bulk Actions');
+      fireEvent.click(
+        within(screen.getByTestId('action-bar')).getByTestId('action'),
+      );
+
+      expect(screen.getByTestId('confirm')).toBeInTheDocument();
+
+      await clickGroup('Export');
+
+      expect(screen.queryByTestId('confirm')).toBeNull();
+
+      // The first click only asks for the confirmation.
+      fireEvent.click(
+        within(screen.getByTestId('action-bar')).getByTestId('action'),
+      );
+
+      expect(onExportDelete).not.toHaveBeenCalled();
+    });
+  });
 });