@kaizen/components 2.2.4 → 2.3.1

package/src/TitleBlock/TitleBlock.tsx

@@ -8,7 +8,6 @@ import { Select } from '~components/Select'
 import { Tag } from '~components/Tag'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { MainActions } from './subcomponents/MainActions'
-import { MobileActions } from './subcomponents/MobileActions'
 import { SecondaryActions } from './subcomponents/SecondaryActions'
 import {
   type NavigationTabs,
@@ -18,7 +17,7 @@ import {
   type TitleBlockProps,
   type TitleBlockVariant,
 } from './types'
-import { createTabletOverflowMenuItems, isReversed } from './utils'
+import { isReversed } from './utils'
 import styles from './TitleBlock.module.scss'
 
 const renderTag = (surveyStatus: SurveyStatus): ReactNode => {
@@ -258,7 +257,6 @@ export const TitleBlock = ({
   sectionTitleDescriptionAutomationId = 'TitleBlock__SectionTitleDescription',
   breadcrumbAutomationId = 'TitleBlock__Breadcrumb',
   breadcrumbTextAutomationId = 'TitleBlock__BreadcrumbText',
-  autoHideMobileActionsMenu = false,
 }: TitleBlockProps): JSX.Element => {
   const hasNavigationTabs = navigationTabs && navigationTabs.length > 0
   const collapseNavigationArea =
@@ -343,19 +341,13 @@ export const TitleBlock = ({
                   </>
                 </div>
               </div>
-              {(primaryAction ??
-                defaultAction ??
-                secondaryActions ??
-                secondaryOverflowMenuItems) && (
+              {(primaryAction ?? defaultAction ?? secondaryActions) && (
                 <MainActions
                   primaryAction={primaryAction}
                   defaultAction={defaultAction}
+                  secondaryActions={secondaryActions}
+                  secondaryOverflowMenuItems={secondaryOverflowMenuItems}
                   reversed={isReversed(variant)}
-                  overflowMenuItems={createTabletOverflowMenuItems(
-                    secondaryActions,
-                    secondaryOverflowMenuItems,
-                  )}
-                  showOverflowMenu={isSmallOrMediumViewport}
                 />
               )}
             </div>
@@ -395,18 +387,6 @@ export const TitleBlock = ({
             </div>
           </div>
         </div>
-        <MobileActions
-          primaryAction={primaryAction}
-          defaultAction={defaultAction}
-          secondaryActions={secondaryActions}
-          secondaryOverflowMenuItems={secondaryOverflowMenuItems}
-          drawerHandleLabelIconPosition={
-            primaryAction && 'iconPosition' in primaryAction
-              ? primaryAction.iconPosition
-              : undefined
-          }
-          autoHide={autoHideMobileActionsMenu}
-        />
       </div>
     </>
   )

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, waitFor, within } from '@storybook/test'
 import { Icon } from '~components/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { StickerSheet } from '~storybook/components/StickerSheet'
@@ -26,6 +27,47 @@ const SECONDARY_ACTIONS = [
   },
 ]
 
+const viewports = {
+  viewports: {
+    default: {
+      name: 'desktop (above or equal to 1366)',
+      styles: { width: '1366px', height: '800px' },
+      type: 'desktop',
+    },
+    desktopSm: {
+      name: 'desktop-sm (1024 - 1365)',
+      styles: { width: '1365px', height: '800px' },
+      type: 'desktop',
+    },
+    tablet: {
+      name: 'tablet (672 - 1023)',
+      styles: { width: '1023px', height: '800px' },
+      type: 'desktop',
+    },
+    mobileResponsive: {
+      name: 'mobile-responsive (512 - 671)',
+      styles: { width: '671px', height: '800px' },
+      type: 'desktop',
+    },
+    mobile: {
+      name: 'mobile (361 - 512)',
+      styles: { width: '511px', height: '800px' },
+      type: 'desktop',
+    },
+    mobileXs: {
+      name: 'mobile (under 360)',
+      styles: { width: '360px', height: '800px' },
+      type: 'desktop',
+    },
+  },
+  defaultViewport: 'default',
+}
+
+const chromaticViewports = {
+  disable: false,
+  viewports: [1366, 1365, 1079, 360, 320],
+}
+
 const meta = {
   title: 'Components/TitleBlock',
   component: TitleBlock,
@@ -94,54 +136,41 @@ export const Playground: Story = {
 
 export const Viewports: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-        mediumSmall: {
-          name: 'Medium and small',
-          styles: { width: '1079px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1079, 1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+}
+export const WithTabNavigation: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    const TabNavigation = await canvas.findByRole('navigation', {
+      name: 'Page title',
+    })
+
+    await step('Navigation Tab is present', async () => {
+      await waitFor(() => expect(TabNavigation).toBeInTheDocument())
+    })
+
+    await step('Navigation is focusable', async () => {
+      const NavigationList = canvas.getByRole('list')
+      const listItems = within(NavigationList).getAllByRole('listitem')
+
+      const thirdNavigationLink = within(listItems[2]).getByRole('link')
+      thirdNavigationLink.focus()
+      expect(thirdNavigationLink).toHaveFocus()
+    })
   },
 }
 
 export const HasLongTitle: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: { title: 'A long title with over thirty characters' },
 }
@@ -153,25 +182,8 @@ export const LightVariant: Story = {
         sourceState: 'shown',
       },
     },
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'light',
@@ -189,25 +201,8 @@ export const LightVariant: Story = {
 
 export const AdminVariant: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'admin',
@@ -224,25 +219,8 @@ export const AdminVariant: Story = {
 
 export const EducationVariant: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'education',

package/src/TitleBlock/_mixins.scss

@@ -35,3 +35,9 @@
     @content;
   }
 }
+
+@mixin title-block-xsmall {
+  @container (max-width: 511px) {
+    @content;
+  }
+}

package/src/TitleBlock/subcomponents/MainActions.module.scss

@@ -9,10 +9,35 @@
     flex-grow: 1;
     flex-shrink: 0;
 
+    .defaultActionButtonMinimized {
+      display: none;
+      margin-inline-end: 0;
+    }
+
     @include ca-margin($start: calc(#{$ca-grid} / 2));
 
-    @include title-block-small {
-      display: none;
+    @include title-block-xsmall {
+      padding-top: 12px;
+      justify-content: flex-start;
+      padding-left: 1.25rem;
+
+      @media (max-width: 511px) {
+        padding-top: 0;
+        padding-left: 3.375rem;
+      }
+
+      @media (max-width: 360px) {
+        .defaultActionButton {
+          display: none;
+          margin-inline-end: 0;
+        }
+
+        .defaultActionButtonMinimized {
+          display: flex;
+          margin-inline-end: 3px;
+          margin-left: -0.5rem;
+        }
+      }
     }
   }
 }

package/src/TitleBlock/subcomponents/MainActions.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 import { Button, IconButton } from '~components/ButtonV1'
 import { Icon } from '~components/Icon'
 import { Menu, MenuList } from '~components/MenuV1'
-import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants'
+import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '~components/TitleBlock'
 import {
   type DefaultActionProps,
   type PrimaryActionProps,
+  type SecondaryActionsProps,
   type TitleBlockMenuItemProps,
 } from '../types'
-import { isMenuGroupNotButton } from '../utils'
+import { createTabletOverflowMenuItems, isMenuGroupNotButton } from '../utils'
 import { TitleBlockMenuItem } from './TitleBlockMenuItem'
 import { Toolbar } from './Toolbar'
 import styles from './MainActions.module.scss'
@@ -17,18 +18,135 @@ type MainActionsProps = {
   primaryAction?: PrimaryActionProps
   defaultAction?: DefaultActionProps
   reversed?: boolean
-  overflowMenuItems?: TitleBlockMenuItemProps[]
+  secondaryActions?: SecondaryActionsProps
+  secondaryOverflowMenuItems?: TitleBlockMenuItemProps[]
   showOverflowMenu?: boolean
 }
 
+const renderSecondaryAndOverflowMenu = (
+  secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
+  reversed?: boolean,
+): JSX.Element | undefined => {
+  if (!secondaryOverflowMenuItems) return undefined
+  return (
+    <Menu
+      align="right"
+      button={
+        <IconButton
+          label={'Open secondary and overflow menu'}
+          reversed={reversed}
+          icon={<Icon name="more_horiz" isPresentational />}
+          id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
+          classNameOverride={styles.overflowMenuButton}
+        />
+      }
+    >
+      <MenuList>
+        {secondaryOverflowMenuItems.map((menuItem, i) => (
+          <TitleBlockMenuItem key={i} {...menuItem} />
+        ))}
+      </MenuList>
+    </Menu>
+  )
+}
+
 export const MainActions = ({
   primaryAction,
   defaultAction,
+  secondaryActions,
+  secondaryOverflowMenuItems,
   reversed = false,
-  overflowMenuItems,
-  showOverflowMenu = false,
 }: MainActionsProps): JSX.Element => {
   let items
+
+  // Build combined secondary + overflow menu items once, to be spread into the toolbar items
+  const secondaryAndOverflowMenu: { key: string; node: JSX.Element }[] = []
+
+  // Convert defaultAction to menu item format and prepend to combined list
+  let defaultActionMenuItem: TitleBlockMenuItemProps | undefined
+  if (defaultAction) {
+    if ('component' in defaultAction) {
+      defaultActionMenuItem = defaultAction
+    } else if ('onClick' in defaultAction) {
+      defaultActionMenuItem = {
+        label: defaultAction.label,
+        icon: defaultAction.icon,
+        onClick: defaultAction.onClick,
+        disabled: defaultAction.disabled,
+      }
+    } else if ('href' in defaultAction) {
+      defaultActionMenuItem = {
+        label: defaultAction.label,
+        icon: defaultAction.icon,
+        href: defaultAction.href,
+        disabled: defaultAction.disabled,
+      }
+    }
+  }
+
+  const combinedSecondaryOverflowItems = createTabletOverflowMenuItems(
+    secondaryActions,
+    secondaryOverflowMenuItems,
+  )
+
+  // Prepend defaultAction to the combined list if it exists
+  const allMenuItems = defaultActionMenuItem
+    ? [defaultActionMenuItem, ...combinedSecondaryOverflowItems]
+    : combinedSecondaryOverflowItems
+
+  if (allMenuItems.length > 0) {
+    secondaryAndOverflowMenu.push({
+      key: 'overflowMenu',
+      node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)!,
+    })
+  }
+
+  const defaultActionItem = defaultAction
+    ? [
+        {
+          key: 'defaultAction',
+          node: (
+            <Button
+              classNameOverride={styles.defaultActionButton}
+              {...{
+                ...defaultAction,
+                reversed: defaultAction.reversed ?? reversed,
+              }}
+              data-automation-id="title-block-default-action-button"
+              data-testid="title-block-default-action-button"
+            />
+          ),
+        },
+      ]
+    : []
+
+  const defaultActionItemMinimized = defaultAction
+    ? [
+        {
+          key: 'defaultActionMinimized',
+          node: (
+            <div className={styles.defaultActionButtonMinimized}>
+              <Menu
+                align="right"
+                button={
+                  <IconButton
+                    label={'Open default action overflow menu'}
+                    reversed={reversed}
+                    icon={<Icon name="more_horiz" isPresentational />}
+                    id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
+                  />
+                }
+              >
+                <MenuList>
+                  {defaultActionMenuItem && <TitleBlockMenuItem {...defaultActionMenuItem} />}
+                </MenuList>
+              </Menu>
+            </div>
+          ),
+        },
+      ]
+    : []
+
   if (primaryAction && isMenuGroupNotButton(primaryAction)) {
     const menuContent = primaryAction.menuItems.map((item, idx) => (
       <TitleBlockMenuItem
@@ -40,23 +158,8 @@ export const MainActions = ({
     ))
 
     items = [
-      ...(defaultAction
-        ? [
-            {
-              key: 'defaultAction',
-              node: (
-                <Button
-                  {...{
-                    ...defaultAction,
-                    reversed: defaultAction.reversed ?? reversed,
-                  }}
-                  data-automation-id="title-block-default-action-button"
-                  data-testid="title-block-default-action-button"
-                />
-              ),
-            },
-          ]
-        : []),
+      ...defaultActionItem,
+      ...defaultActionItemMinimized,
       ...(primaryAction
         ? [
             {
@@ -93,23 +196,8 @@ export const MainActions = ({
     ]
   } else {
     items = [
-      ...(defaultAction
-        ? [
-            {
-              key: 'defaultAction',
-              node: (
-                <Button
-                  {...{
-                    ...defaultAction,
-                    reversed: defaultAction.reversed ?? reversed,
-                  }}
-                  data-automation-id="title-block-default-action-button"
-                  data-testid="title-block-default-action-button"
-                />
-              ),
-            },
-          ]
-        : []),
+      ...defaultActionItem,
+      ...defaultActionItemMinimized,
       ...(primaryAction
         ? [
             {
@@ -139,37 +227,6 @@ export const MainActions = ({
     ]
   }
 
-  if (overflowMenuItems && showOverflowMenu && overflowMenuItems.length > 0) {
-    items = [
-      {
-        key: 'overflowMenu',
-        node: (
-          <Menu
-            align="right"
-            button={
-              <IconButton
-                id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
-                label="Open secondary menu"
-                reversed={reversed}
-                icon={<Icon name="more_horiz" isPresentational />}
-              />
-            }
-          >
-            <MenuList>
-              {overflowMenuItems.map((menuItem, idx) => (
-                <TitleBlockMenuItem
-                  {...menuItem}
-                  key={`main-action-overflow-item-menu-item-${idx}`}
-                />
-              ))}
-            </MenuList>
-          </Menu>
-        ),
-      },
-      ...items,
-    ]
-  }
-
   return (
     <div className={styles.mainActionsContainer}>
       <Toolbar