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

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { action } from 'storybook/actions';
 import { IconName } from '../Icons';
 import { PageHeader } from './PageHeader';
@@ -78,9 +80,30 @@ const bulkHeaderActions: PageHeaderActionProps[] = [
   },
 ];
 
+const exportHeaderActions: PageHeaderActionProps[] = [
+  {
+    label: 'Export as CSV',
+    icon: IconName.File,
+    onClick: action('onActionSelected'),
+  },
+  {
+    label: 'Export Settings',
+    path: '/export-settings',
+    tag: 'NEW',
+  },
+];
+
 const meta: Meta<typeof PageHeader> = {
   component: PageHeader,
   title: 'Other Components/PageHeader',
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 export default meta;
 
@@ -97,11 +120,22 @@ export const Titles: StoryObj<typeof PageHeader> = {
   args: { title: 'Title', subtitle: 'Subtitle' },
 };
 
+export const TitleOnly: StoryObj<typeof PageHeader> = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Without a subtitle, the title is centered vertically.',
+      },
+    },
+  },
+  args: { title: 'Episodes' },
+};
+
 export const Actions: StoryObj<typeof PageHeader> = {
   parameters: {
     docs: {
       description: {
-        story: 'An array of standard page header actions can be passed in.',
+        story: `An array of standard page header actions can be passed in. An action shows its icon, and its label as a tooltip.`,
       },
     },
   },
@@ -112,12 +146,59 @@ export const Actions: StoryObj<typeof PageHeader> = {
   },
 };
 
+export const ActionsWithoutIcons: StoryObj<typeof PageHeader> = {
+  parameters: {
+    docs: {
+      description: {
+        story: `An action without an icon shows its label instead, which is cut after four lines.
+        Spacers separate groups of actions.`,
+      },
+    },
+  },
+  args: {
+    title: 'Episodes',
+    actions: [
+      {
+        label: 'Create Snapshot',
+        kind: 'action',
+        onClick: action('onActionSelected'),
+      },
+      {
+        label: 'Create Snapshot and Publish all Episodes',
+        kind: 'action',
+        onClick: action('onActionSelected'),
+      },
+      { kind: 'spacer' },
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkHeaderActions,
+      },
+      { kind: 'spacer' },
+      {
+        label: 'Quick View',
+        icon: IconName.QuickEdit,
+        kind: 'action',
+        onClick: action('onActionSelected'),
+      },
+      { kind: 'spacer' },
+      {
+        label: 'New',
+        icon: IconName.Plus,
+        kind: 'action',
+        path: '/new',
+      },
+    ],
+  },
+};
+
 export const ActionsGroup: StoryObj<typeof PageHeader> = {
   parameters: {
     docs: {
       description: {
-        story: `Bulk actions is available when an array of actions is passed in as a prop. The actions themselves will try to fit into any available space.
-        Those that cannot fit, will be rendered under the 'More' action as a child of the drop down list.`,
+        story: `An actions group renders a single action on the page header. Clicking it opens an action bar below the page header, holding the actions of the group, and clicking it again closes the bar.
+        The bar can show a label of its own through 'actionBarLabel'. Actions that do not fit the available width move into an overflow menu.`,
       },
     },
   },
@@ -130,6 +211,8 @@ export const ActionsGroup: StoryObj<typeof PageHeader> = {
         icon: IconName.Bulk,
         kind: 'group',
         actions: bulkHeaderActions,
+        actionBarLabel: 'Selected 3',
+        openActionsGroupOnStart: true,
       },
     ],
   },
@@ -140,8 +223,8 @@ export const All: StoryObj<typeof PageHeader> = {
   parameters: {
     docs: {
       description: {
-        story:
-          'When actions and bulk actions are present, a spacer will be created in-between to help differentiate them.',
+        story: `When actions and bulk actions are present, a spacer will be created in-between to help differentiate them.
+        Only one actions group can be open at a time, so opening a group closes the one that is open. Groups can hold navigation actions as well.`,
       },
     },
   },
@@ -156,17 +239,17 @@ export const All: StoryObj<typeof PageHeader> = {
         icon: IconName.Bulk,
         kind: 'group',
         actions: bulkHeaderActions,
-        onActionsGroupToggled: async (): Promise<void> => {
-          action('onBulkActions1Toggled');
+        onActionsGroupToggled: async (expanded: boolean): Promise<void> => {
+          action('onBulkActionsToggled')(expanded);
         },
       },
       {
-        label: 'Bulk Actions 2',
-        icon: IconName.Bulk,
+        label: 'Export',
+        icon: IconName.File,
         kind: 'group',
-        actions: [bulkHeaderActions[0]],
-        onActionsGroupToggled: async (): Promise<void> => {
-          action('onBulkActions2Toggled');
+        actions: exportHeaderActions,
+        onActionsGroupToggled: async (expanded: boolean): Promise<void> => {
+          action('onExportToggled')(expanded);
         },
       },
     ],

package/src/components/PageHeader/PageHeader.tsx

@@ -1,23 +1,37 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useTabTitle } from '../../hooks/useTabTitle/useTabTitle';
-import type { PageHeaderProps } from './PageHeader.model';
+import { ActionBar } from '../ActionBar';
+import type {
+  PageHeaderActionItemProps,
+  PageHeaderProps,
+} from './PageHeader.model';
 import classes from './PageHeader.module.scss';
 import type { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
-import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
-import { PageHeaderActionsGroupContextProvider } from './PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider';
-import { useElementWidthObserver } from './helpers/useElementWidthObserver';
+import { toActionBarAction } from './helpers';
+
+type PageHeaderActionsGroupItem = Extract<
+  PageHeaderActionItemProps,
+  { kind: 'group' }
+>;
+
+const isActionsGroup = (
+  action: PageHeaderActionItemProps,
+): action is PageHeaderActionsGroupItem => action.kind === 'group';
 
 /**
  * Primary header for stations. Accepts a title, subtitle, actions, and actions groups.
+ *
+ * An actions group renders a single action, which opens an action bar holding
+ * the actions of the group below the header. Only one group can be open at a time.
  * @example
  * <PageHeader title="title" subtitle="subtitle" actions={[
  *  { label: 'Undo', icon: IconName.Undo, kind: 'action', onClick: onActionSelected },
  *  { label: 'Cancel', icon: IconName.X, kind: 'action' onClick: onActionSelected },
  *  { kind: 'spacer' },
  *  { label: 'Actions Group', kind: 'group', actions: [
- *    { label: 'Action 1', actionType: PageHeaderActionType.Context, icon: IconName.Delete, confirmationMode: 'Advanced', onClick: onActionSelected },
+ *    { label: 'Action 1', icon: IconName.Delete, confirmationMode: 'Advanced', onClick: onActionSelected },
  *  ]}
  * ]} />
  */
@@ -29,23 +43,46 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   setTabTitle = true,
 }) => {
   useTabTitle(title, setTabTitle);
-  const { width, ref } = useElementWidthObserver<HTMLDivElement>();
 
-  const [availableActionSpace, setAvailableActionSpace] = useState<number>(0);
+  /**
+   * Label of the open group, or `null` once the groups were closed. Stays
+   * `undefined` until a group is toggled, in which case a group asking to be
+   * open on start is the open one.
+   */
+  const [toggledGroupLabel, setToggledGroupLabel] = useState<string | null>();
+
+  const groups = actions.filter(isActionsGroup);
+
+  const openGroup =
+    toggledGroupLabel === undefined
+      ? groups.find((group) => group.openActionsGroupOnStart)
+      : groups.find((group) => group.label === toggledGroupLabel);
+
+  const toggleGroup = async (
+    group: PageHeaderActionsGroupItem,
+  ): Promise<void> => {
+    const isOpening = group !== openGroup;
+
+    try {
+      // Only one group can be open, so the open one is closed first.
+      if (isOpening && openGroup !== undefined) {
+        await openGroup.onActionsGroupToggled?.(false);
+        setToggledGroupLabel(null);
+      }
 
-  useEffect(() => {
-    // Use up to 75% of the container width for actions
-    const maxActionsWidth = width * 0.75;
+      await group.onActionsGroupToggled?.(isOpening);
+    } catch {
+      // A handler rejecting aborts the toggle.
+      return;
+    }
 
-    // Each action is 120px wide
-    setAvailableActionSpace(Math.floor(maxActionsWidth / 120 - actions.length));
-  }, [width, actions.length]);
+    setToggledGroupLabel(isOpening ? group.label : null);
+  };
 
   return (
     <div
       className={clsx(classes.container, 'page-header-container', className)}
       data-test-id="page-header"
-      ref={ref}
     >
       <div className={clsx(classes.titles)}>
         <div
@@ -64,30 +101,44 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
         </div>
       </div>
       <div className={classes.actions} data-test-id="page-header-actions">
-        <PageHeaderActionsGroupContextProvider>
-          {actions.map((action, index) => {
-            switch (action.kind) {
-              case 'group':
-                return (
-                  <PageHeaderActionsGroup
-                    key={index}
-                    {...action}
-                    availableActionSpace={availableActionSpace}
-                  />
-                );
-              case 'spacer':
-                return <div key={index} className={classes.spacer} />;
-              case 'action':
-                return (
-                  <PageHeaderAction
-                    key={index}
-                    {...(action as PageHeaderActionProps)}
-                  />
-                );
-            }
-          })}
-        </PageHeaderActionsGroupContextProvider>
+        {actions.map((action, index) => {
+          switch (action.kind) {
+            case 'group':
+              return (
+                <PageHeaderAction
+                  key={index}
+                  label={action.label}
+                  icon={action.icon}
+                  disabled={action.disabled}
+                  className={action.className}
+                  toggled={action === openGroup}
+                  onClick={() => toggleGroup(action)}
+                />
+              );
+            case 'spacer':
+              return <div key={index} className={classes.spacer} />;
+            case 'action':
+              return (
+                <PageHeaderAction
+                  key={index}
+                  {...(action as PageHeaderActionProps)}
+                />
+              );
+          }
+        })}
       </div>
+      {openGroup !== undefined && (
+        <ActionBar
+          // Each group gets a bar of its own, even if they hold the same actions.
+          key={openGroup.label}
+          className={classes.actionBar}
+          label={openGroup.actionBarLabel}
+          actions={openGroup.actions.map((action) => ({
+            ...toActionBarAction(action),
+            disabled: openGroup.groupActionsDisabled || action.disabled,
+          }))}
+        />
+      )}
     </div>
   );
 };

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.model.ts

@@ -22,6 +22,14 @@ export interface PageHeaderJsActionProps
    * Changes the background color to the corresponding action type. (default: 'Context')
    */
   actionType?: PageHeaderActionType;
+  /**
+   * Whether the action is toggled on. When `true`, the action renders in its
+   * toggled (pressed) state and `actionType` is ignored. When `false` or
+   * omitted, the action renders according to `actionType`.
+   * Set this to make the action a toggle button rather than a one-shot action.
+   * (default: undefined)
+   */
+  toggled?: boolean;
 }
 
 export interface PageHeaderNavigationActionProps

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

@@ -6,11 +6,15 @@
   @include boxSizing;
 
   height: $page-header-height;
-  width: 120px;
+  width: var(--page-header-action-width, $page-header-action-width);
+
+  // Holds either the icon or the label, centered. The hidden label and the tag
+  // are laid over the action.
+  position: relative;
+  overflow: hidden;
 
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr;
+  place-items: center;
 
   color: var(--page-header-action-color, $page-header-action-color);
   background-color: var(
@@ -20,30 +24,52 @@
   cursor: pointer;
   user-select: none;
 
-  .label,
-  .icon {
-    display: grid;
-    grid-template: 1fr / 1fr;
-    place-items: center;
-  }
-
   .label {
-    place-items: end;
-    justify-items: center;
-    padding-bottom: 10px;
+    // Long labels wrap onto further rows and are cut after the fourth one. The
+    // wrapping is set explicitly, as `all: unset` would inherit a `nowrap` of
+    // whatever the header is rendered in.
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    white-space: normal;
+    overflow-wrap: anywhere;
 
-    font-size: 14px;
+    // Chrome centers the cut row without its ellipsis, and appends the
+    // ellipsis after it, which can then reach up to half its width past the
+    // row. The padding leaves room for it, as overflow is only cut at the edge
+    // of the padding.
+    width: 100%;
+    padding: 0 6px;
+
+    font-size: var(
+      --page-header-action-font-size,
+      $page-header-action-font-size
+    );
     line-height: 1.1;
     text-align: center;
   }
 
+  // Transparent rather than removed, so that it still names the action and
+  // takes the clicks on it, e.g. of tests that find an action by its label.
+  .hiddenLabel {
+    position: absolute;
+    inset: 0;
+
+    opacity: 0;
+  }
+
   .icon {
-    justify-items: center;
-    padding-top: 10px;
+    display: grid;
+    place-items: center;
   }
 
   .icon > * {
-    height: 40px;
+    height: var(--page-header-action-icon-size, $page-header-action-icon-size);
+    max-width: var(
+      --page-header-action-icon-size,
+      $page-header-action-icon-size
+    );
   }
 
   &:hover {
@@ -118,23 +144,10 @@
     }
 
     &:hover {
-      color: var(--page-header-action-color, $page-header-action-color);
-
       background-color: var(
-        --page-header-action-context-hover-background-color,
-        $page-header-action-context-hover-background-color
+        --page-header-action-active-hover-background-color,
+        $page-header-action-active-hover-background-color
       );
-
-      .pageHeaderActionsIcons {
-        polygon,
-        path,
-        circle {
-          stroke: var(
-            --page-header-action-icon-color,
-            $page-header-action-icon-color
-          );
-        }
-      }
     }
   }
 
@@ -164,12 +177,12 @@
     color: var(--actions-disabled-fg-color, $actions-disabled-fg-color);
   }
 
+  // A ribbon across the top right corner of the action.
   .tag {
     position: absolute;
-    transform: rotate(45deg) translateX(53px) translateY(-40px);
-    transform-origin: center;
-    top: 0;
-    left: 0;
+    top: 6px;
+    right: -22px;
+    transform: rotate(45deg);
     display: grid;
     background-color: var(
       --page-header-action-tag-background-color,
@@ -180,15 +193,10 @@
       $page-header-action-tag-font-size
     );
     font-weight: bold;
-    width: 75px;
+    width: 70px;
     height: 14px;
     align-items: center;
     text-align: center;
     z-index: 0;
   }
-
-  &:has(.tag) {
-    position: relative;
-    overflow: hidden;
-  }
 }