@kaizen/components 2.3.2 → 2.3.4

package/dist/cjs/src/TitleBlock/TitleBlock.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var Avatar = require('../Avatar/Avatar.cjs');
 require('../ButtonV1/Button/Button.cjs');
@@ -212,6 +213,7 @@ var TitleBlock = function (_a) {
     isSmall = _o.isSmall,
     isMedium = _o.isMedium;
   var isSmallOrMediumViewport = isMedium || isSmall;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
   return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
     id: id,
     className: classnames__default.default(TitleBlock_module.titleBlock, TitleBlock_module["".concat(variant, "Variant")], Boolean(subtitle) && TitleBlock_module.hasSubtitle, Boolean(pageSwitcherSelect) && TitleBlock_module.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && TitleBlock_module.collapseNavigationArea, title && title.length >= 30 && TitleBlock_module.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && TitleBlock_module.hasLongSubtitle, hasNavigationTabs && TitleBlock_module.hasNavigationTabs)
@@ -238,7 +240,11 @@ var TitleBlock = function (_a) {
       name: "menu",
       isPresentational: true
     }),
-    label: "Open menu",
+    label: formatMessage({
+      id: 'kzTitleBlock.hamburgerMenuLabel',
+      defaultMessage: 'Open menu',
+      description: 'Label for the dropdown menu which displays navigation items'
+    }),
     reversed: utils.isReversed(variant)
   })), avatar && renderAvatar(avatar, avatarAutomationId), React__default.default.createElement("div", {
     className: TitleBlock_module.titleAndSubtitle
@@ -284,7 +290,7 @@ var TitleBlock = function (_a) {
     sectionTitleAutomationId: sectionTitleAutomationId,
     sectionTitleDescription: sectionTitleDescription,
     sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId
-  }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId))), renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && React__default.default.createElement(SecondaryActions.SecondaryActions, {
+  }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId))), !sectionTitle && !sectionTitleDescription && !renderSectionTitle && renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && React__default.default.createElement(SecondaryActions.SecondaryActions, {
     secondaryActions: secondaryActions,
     secondaryOverflowMenuItems: secondaryOverflowMenuItems,
     reversed: utils.isReversed(variant)

package/dist/cjs/src/TitleBlock/subcomponents/MainActions.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var Button = require('../../ButtonV1/Button/Button.cjs');
 var IconButton = require('../../ButtonV1/IconButton/IconButton.cjs');
 var Icon = require('../../Icon/Icon.cjs');
@@ -19,12 +20,12 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var renderSecondaryAndOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryAndOverflowMenu = function (secondaryAndOverflowMenuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems) return undefined;
   return React__default.default.createElement(index.Menu, {
     align: "right",
     button: React__default.default.createElement(IconButton.IconButton, {
-      label: 'Open secondary and overflow menu',
+      label: secondaryAndOverflowMenuLabel,
       reversed: reversed,
       icon: React__default.default.createElement(Icon.Icon, {
         name: "more_horiz",
@@ -47,6 +48,12 @@ var MainActions = function (_a) {
     secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
     _e = _a.reversed,
     reversed = _e === void 0 ? false : _e;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var secondaryAndOverflowMenuLabel = formatMessage({
+    id: 'kzTitleBlock.secondaryAndOverflowMenuLabel',
+    defaultMessage: 'Open secondary and overflow menu',
+    description: 'Label for the dropdown menu which displays additional actions'
+  });
   var items;
   // Build combined secondary + overflow menu items once, to be spread into the toolbar items
   var secondaryAndOverflowMenu = [];
@@ -77,7 +84,7 @@ var MainActions = function (_a) {
   if (allMenuItems.length > 0) {
     secondaryAndOverflowMenu.push({
       key: 'overflowMenu',
-      node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)
+      node: renderSecondaryAndOverflowMenu(secondaryAndOverflowMenuLabel, allMenuItems, reversed)
     });
   }
   var defaultActionItem = defaultAction ? [{
@@ -97,7 +104,11 @@ var MainActions = function (_a) {
     }, React__default.default.createElement(index.Menu, {
       align: "right",
       button: React__default.default.createElement(IconButton.IconButton, {
-        label: 'Open default action overflow menu',
+        label: formatMessage({
+          id: 'kzTitleBlock.defaultActionMinimizedOverflowMenuLabel',
+          defaultMessage: 'Open default action overflow menu',
+          description: 'Label for the dropdown menu which displays the default action item'
+        }),
         reversed: reversed,
         icon: React__default.default.createElement(Icon.Icon, {
           name: "more_horiz",

package/dist/cjs/src/TitleBlock/subcomponents/SecondaryActions.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var Button = require('../../ButtonV1/Button/Button.cjs');
 var IconButton = require('../../ButtonV1/IconButton/IconButton.cjs');
 var Icon = require('../../Icon/Icon.cjs');
@@ -17,7 +18,7 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryOverflowMenu = function (menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined;
   return React__default.default.createElement("div", {
     className: TitleBlock_module.secondaryOverflowMenu
@@ -26,7 +27,8 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
     button: React__default.default.createElement(Button.Button, {
       secondary: true,
       reversed: reversed,
-      label: "Menu",
+      label: menuLabel,
+      "aria-label": menuAriaLabel,
       "data-automation-id": constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       "data-testid": constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       icon: React__default.default.createElement(Icon.Icon, {
@@ -42,7 +44,7 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
   }))));
 };
 // New: combined overflow menu (secondary actions converted + overflow menu items)
-var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryOverflowMenuItems, reversed) {
+var renderCombinedSecondaryOverflowMenu = function (combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed) {
   var secondaryConverted = secondaryActions ? utils.convertSecondaryActionsToMenuItems(secondaryActions) : [];
   var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
   if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined;
@@ -52,7 +54,7 @@ var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryO
   }, React__default.default.createElement(index.Menu, {
     align: "right",
     button: React__default.default.createElement(IconButton.IconButton, {
-      label: "Open combined secondary + overflow menu",
+      label: combinedMenuLabel,
       reversed: reversed,
       icon: React__default.default.createElement(Icon.Icon, {
         name: "more_horiz",
@@ -74,7 +76,23 @@ var SecondaryActions = function (_a) {
     secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
     _b = _a.reversed,
     reversed = _b === void 0 ? false : _b;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
   if (!secondaryActions && !secondaryOverflowMenuItems) return null;
+  var menuLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuLabel',
+    defaultMessage: 'Menu',
+    description: 'Label for the dropdown menu which displays additional action items'
+  });
+  var menuAriaLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuAriaLabel',
+    defaultMessage: 'Opens overflow menu',
+    description: 'Aria Label for the dropdown menu which displays additional action items'
+  });
+  var combinedMenuLabel = formatMessage({
+    id: 'kzTitleBlock.combinedOverflowMenuLabel',
+    defaultMessage: 'Open combined secondary and overflow menu',
+    description: 'Label for the dropdown menu which displays additional action items and secondary actions'
+  });
   var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
     if ('menuItems' in action) {
       return {
@@ -118,8 +136,8 @@ var SecondaryActions = function (_a) {
       };
     }
   }) : [];
-  var overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed);
-  var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
+  var overflowMenu = renderSecondaryOverflowMenu(menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed);
+  var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed);
   var toolbarItems = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
     key: 'overflowMenu',
     node: overflowMenu

package/dist/esm/src/TitleBlock/TitleBlock.mjs

@@ -1,5 +1,6 @@
 import { __assign } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
 import '../ButtonV1/Button/Button.mjs';
@@ -204,6 +205,7 @@ const TitleBlock = /*#__PURE__*/function () {
       isSmall = _o.isSmall,
       isMedium = _o.isMedium;
     var isSmallOrMediumViewport = isMedium || isSmall;
+    var formatMessage = useIntl().formatMessage;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       id: id,
       className: classnames(styles.titleBlock, styles["".concat(variant, "Variant")], Boolean(subtitle) && styles.hasSubtitle, Boolean(pageSwitcherSelect) && styles.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && styles.collapseNavigationArea, title && title.length >= 30 && styles.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && styles.hasLongSubtitle, hasNavigationTabs && styles.hasNavigationTabs)
@@ -230,7 +232,11 @@ const TitleBlock = /*#__PURE__*/function () {
         name: "menu",
         isPresentational: true
       }),
-      label: "Open menu",
+      label: formatMessage({
+        id: 'kzTitleBlock.hamburgerMenuLabel',
+        defaultMessage: 'Open menu',
+        description: 'Label for the dropdown menu which displays navigation items'
+      }),
       reversed: isReversed(variant)
     }))), avatar && renderAvatar(avatar, avatarAutomationId), /*#__PURE__*/React.createElement("div", {
       className: styles.titleAndSubtitle
@@ -276,7 +282,7 @@ const TitleBlock = /*#__PURE__*/function () {
       sectionTitleAutomationId: sectionTitleAutomationId,
       sectionTitleDescription: sectionTitleDescription,
       sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId
-    }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))), renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(SecondaryActions, {
+    }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))), !sectionTitle && !sectionTitleDescription && !renderSectionTitle && renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(SecondaryActions, {
       secondaryActions: secondaryActions,
       secondaryOverflowMenuItems: secondaryOverflowMenuItems,
       reversed: isReversed(variant)

package/dist/esm/src/TitleBlock/subcomponents/MainActions.mjs

@@ -1,5 +1,6 @@
 import { __spreadArray, __assign } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Button } from '../../ButtonV1/Button/Button.mjs';
 import { IconButton } from '../../ButtonV1/IconButton/IconButton.mjs';
 import { Icon } from '../../Icon/Icon.mjs';
@@ -11,12 +12,12 @@ import { createTabletOverflowMenuItems, isMenuGroupNotButton } from '../utils.mj
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import { Toolbar } from './Toolbar.mjs';
 import styles from './MainActions.module.scss.mjs';
-var renderSecondaryAndOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryAndOverflowMenu = function (secondaryAndOverflowMenuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems) return undefined;
   return /*#__PURE__*/React.createElement(Menu, {
     align: "right",
     button: /*#__PURE__*/React.createElement(IconButton, {
-      label: 'Open secondary and overflow menu',
+      label: secondaryAndOverflowMenuLabel,
       reversed: reversed,
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "more_horiz",
@@ -40,6 +41,12 @@ const MainActions = /*#__PURE__*/function () {
       secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
       _e = _a.reversed,
       reversed = _e === void 0 ? false : _e;
+    var formatMessage = useIntl().formatMessage;
+    var secondaryAndOverflowMenuLabel = formatMessage({
+      id: 'kzTitleBlock.secondaryAndOverflowMenuLabel',
+      defaultMessage: 'Open secondary and overflow menu',
+      description: 'Label for the dropdown menu which displays additional actions'
+    });
     var items;
     // Build combined secondary + overflow menu items once, to be spread into the toolbar items
     var secondaryAndOverflowMenu = [];
@@ -70,7 +77,7 @@ const MainActions = /*#__PURE__*/function () {
     if (allMenuItems.length > 0) {
       secondaryAndOverflowMenu.push({
         key: 'overflowMenu',
-        node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)
+        node: renderSecondaryAndOverflowMenu(secondaryAndOverflowMenuLabel, allMenuItems, reversed)
       });
     }
     var defaultActionItem = defaultAction ? [{
@@ -90,7 +97,11 @@ const MainActions = /*#__PURE__*/function () {
       }, /*#__PURE__*/React.createElement(Menu, {
         align: "right",
         button: /*#__PURE__*/React.createElement(IconButton, {
-          label: 'Open default action overflow menu',
+          label: formatMessage({
+            id: 'kzTitleBlock.defaultActionMinimizedOverflowMenuLabel',
+            defaultMessage: 'Open default action overflow menu',
+            description: 'Label for the dropdown menu which displays the default action item'
+          }),
           reversed: reversed,
           icon: /*#__PURE__*/React.createElement(Icon, {
             name: "more_horiz",

package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs

@@ -1,5 +1,6 @@
 import { __assign, __spreadArray } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Button } from '../../ButtonV1/Button/Button.mjs';
 import { IconButton } from '../../ButtonV1/IconButton/IconButton.mjs';
 import { Icon } from '../../Icon/Icon.mjs';
@@ -9,7 +10,7 @@ import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
 import { convertSecondaryActionsToMenuItems } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import { Toolbar } from './Toolbar.mjs';
-var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryOverflowMenu = function (menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.secondaryOverflowMenu
@@ -18,7 +19,8 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
     button: /*#__PURE__*/React.createElement(Button, {
       secondary: true,
       reversed: reversed,
-      label: "Menu",
+      label: menuLabel,
+      "aria-label": menuAriaLabel,
       "data-automation-id": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       "data-testid": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       icon: /*#__PURE__*/React.createElement(Icon, {
@@ -34,7 +36,7 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
   }))));
 };
 // New: combined overflow menu (secondary actions converted + overflow menu items)
-var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryOverflowMenuItems, reversed) {
+var renderCombinedSecondaryOverflowMenu = function (combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed) {
   var secondaryConverted = secondaryActions ? convertSecondaryActionsToMenuItems(secondaryActions) : [];
   var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
   if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined;
@@ -44,7 +46,7 @@ var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryO
   }, /*#__PURE__*/React.createElement(Menu, {
     align: "right",
     button: /*#__PURE__*/React.createElement(IconButton, {
-      label: "Open combined secondary + overflow menu",
+      label: combinedMenuLabel,
       reversed: reversed,
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "more_horiz",
@@ -67,7 +69,23 @@ const SecondaryActions = /*#__PURE__*/function () {
       secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
       _b = _a.reversed,
       reversed = _b === void 0 ? false : _b;
+    var formatMessage = useIntl().formatMessage;
     if (!secondaryActions && !secondaryOverflowMenuItems) return null;
+    var menuLabel = formatMessage({
+      id: 'kzTitleBlock.overflowMenuLabel',
+      defaultMessage: 'Menu',
+      description: 'Label for the dropdown menu which displays additional action items'
+    });
+    var menuAriaLabel = formatMessage({
+      id: 'kzTitleBlock.overflowMenuAriaLabel',
+      defaultMessage: 'Opens overflow menu',
+      description: 'Aria Label for the dropdown menu which displays additional action items'
+    });
+    var combinedMenuLabel = formatMessage({
+      id: 'kzTitleBlock.combinedOverflowMenuLabel',
+      defaultMessage: 'Open combined secondary and overflow menu',
+      description: 'Label for the dropdown menu which displays additional action items and secondary actions'
+    });
     var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
       if ('menuItems' in action) {
         return {
@@ -111,8 +129,8 @@ const SecondaryActions = /*#__PURE__*/function () {
         };
       }
     }) : [];
-    var overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed);
-    var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
+    var overflowMenu = renderSecondaryOverflowMenu(menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed);
+    var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed);
     var toolbarItems = __spreadArray(__spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
       key: 'overflowMenu',
       node: overflowMenu

package/dist/styles.css

@@ -10058,11 +10058,6 @@
     width: 100%;
     justify-content: center;
   }
-  @container (max-width: calc(768px - 1px)) {
-    .TitleBlock-module_rowBelowSeparator__H4E63 {
-      height: 3.75rem;
-    }
-  }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
     margin-bottom: 0.063rem;
@@ -10098,11 +10093,6 @@
       margin-inline: 24px;
     }
   }
-  @container (max-width: calc(768px - 1px)) {
-    .TitleBlock-module_rowBelowSeparatorInner__3gNec {
-      height: 3.75rem;
-    }
-  }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     box-sizing: border-box;
     position: relative;
@@ -10258,7 +10248,6 @@
     display: none;
     align-self: self-start;
     box-sizing: border-box;
-    overflow: hidden;
     height: 3rem;
     width: 3rem;
     margin-inline-end: calc(1.5rem / 2);
@@ -10268,6 +10257,7 @@
     max-width: 100%;
   }
   .TitleBlock-module_avatar__mEjJ8.TitleBlock-module_withBorder__D8Mz2 {
+    overflow: hidden;
     border: 3px solid var(--color-white, #ffffff);
     border-radius: 50%;
   }
@@ -10338,14 +10328,21 @@
   .TitleBlock-module_sectionTitleContainer__LrDPV {
     display: flex;
     align-items: center;
+    padding-block: 9px;
     padding-inline-end: 8px;
   }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_sectionTitleContainer__LrDPV {
+      padding-block: 17px;
+    }
+  }
   .TitleBlock-module_sectionTitle__b8daw {
     display: block;
   }
   .TitleBlock-module_sectionTitleInner__nJfOP {
     display: flex;
     flex-direction: column;
+    row-gap: 4px;
   }
   @container (min-width: 1080px) {
     .TitleBlock-module_sectionTitleInner__nJfOP {

package/locales/en.json

@@ -221,6 +221,30 @@
     "description": "Prompts user to interact with button to hide information",
     "message": "Hide information:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message": "Open combined secondary and overflow menu"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays the default action item",
+    "message": "Open default action overflow menu"
+  },
+  "kzTitleBlock.hamburgerMenuLabel": {
+    "description": "Label for the dropdown menu which displays navigation items",
+    "message": "Open menu"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel": {
+    "description": "Aria Label for the dropdown menu which displays additional action items",
+    "message": "Opens overflow menu"
+  },
+  "kzTitleBlock.overflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays additional action items",
+    "message": "Menu"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays additional actions",
+    "message": "Open secondary and overflow menu"
+  },
   "singleSelect.chevronButton": {
     "description": "Aria label text for the SingleSelect button to open and close suggestions list",
     "message": "Show suggestions for {field}"
@@ -228,9 +252,5 @@
   "singleSelect.clearButtonAlt_v2": {
     "description": "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
     "message": "Clear selection: {field}"
-  },
-  "splitButton.dropdownButton.label": {
-    "description": "Label for a dropdown menu holding additional actions",
-    "message": "Additional actions"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TitleBlock/TitleBlock.module.scss

@@ -61,10 +61,6 @@
     display: flex;
     width: 100%;
     justify-content: center;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .lightVariant .titleRow {
@@ -112,10 +108,6 @@
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
     @extend %rowBelowSeparatorInnerMarginOverride;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .titleRowInnerContent {
@@ -285,7 +277,6 @@
     display: none;
     align-self: self-start;
     box-sizing: border-box;
-    overflow: hidden;
     height: $ca-grid * 2;
     width: $ca-grid * 2;
 
@@ -296,6 +287,7 @@
     }
 
     &.withBorder {
+      overflow: hidden;
       border: 3px solid $color-white;
       border-radius: 50%;
     }
@@ -367,7 +359,12 @@
   .sectionTitleContainer {
     display: flex;
     align-items: center;
+    padding-block: 9px;
     padding-inline-end: 8px; // 20 take 12 result in 8 extra padding needed in section versus tabs UI
+
+    @include title-block-min-container-1080 {
+      padding-block: 17px;
+    }
   }
 
   .sectionTitle {
@@ -377,6 +374,7 @@
   .sectionTitleInner {
     display: flex;
     flex-direction: column;
+    row-gap: 4px;
 
     @include title-block-min-container-1080 {
       flex-direction: row;

package/src/TitleBlock/TitleBlock.tsx

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { Avatar } from '~components/Avatar'
 import { IconButton } from '~components/ButtonV1'
@@ -266,6 +267,7 @@ export const TitleBlock = ({
     queries: { isSmall, isMedium },
   } = useMediaQueries()
   const isSmallOrMediumViewport = isMedium || isSmall
+  const { formatMessage } = useIntl()
   return (
     <>
       <div
@@ -305,7 +307,12 @@ export const TitleBlock = ({
                         <IconButton
                           onClick={handleHamburgerClick}
                           icon={<Icon name="menu" isPresentational />}
-                          label="Open menu"
+                          label={formatMessage({
+                            id: 'kzTitleBlock.hamburgerMenuLabel',
+                            defaultMessage: 'Open menu',
+                            description:
+                              'Label for the dropdown menu which displays navigation items',
+                          })}
                           reversed={isReversed(variant)}
                         />
                       </div>
@@ -376,7 +383,10 @@ export const TitleBlock = ({
                   </div>
                 </div>
               )}
-              {renderNavigationTabs(navigationTabs, collapseNavigationArea, title)}
+              {!sectionTitle &&
+                !sectionTitleDescription &&
+                !renderSectionTitle &&
+                renderNavigationTabs(navigationTabs, collapseNavigationArea, title)}
               {(secondaryActions ?? secondaryOverflowMenuItems) && (
                 <SecondaryActions
                   secondaryActions={secondaryActions}

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, waitFor, within } from '@storybook/test'
+import { Heading } from 'react-aria-components'
 import { Icon } from '~components/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { StickerSheet } from '~storybook/components/StickerSheet'
@@ -253,18 +254,18 @@ export const StickerSheetVariants: Story = {
           ]}
         />
       </StickerSheet.Row>
-      <StickerSheet.Row header="Education (Purple background)">
+      <StickerSheet.Row header="Education (Blue background)">
         <TitleBlock
           variant="education"
           title="Education Variant"
-          subtitle="This is the education variant with purple background"
+          subtitle="This is the education variant with blue background"
           breadcrumb={{
             path: '#',
             text: 'Back to courses',
           }}
           navigationTabs={[
-            <NavigationTab key="1" text="Lessons" href="#" active />,
-            <NavigationTab key="2" text="Assignments" href="#" />,
+            <NavigationTab key="1" variant="education" text="Lessons" href="#" active />,
+            <NavigationTab key="2" variant="education" text="Assignments" href="#" />,
           ]}
         />
       </StickerSheet.Row>
@@ -301,6 +302,192 @@ export const StickerSheetVariants: Story = {
     </StickerSheet>
   ),
 }
+export const StickerSheetWithDefaultAvatar: Story = {
+  name: 'Sticker Sheet (DefaultAvatar)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants With Default Avatar">
+      <StickerSheet.Row header="Default (Purple background)">
+        <TitleBlock title="Default Variant" avatar={{ fullName: 'Blanca Wheeler' }} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education (Blue background)">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          avatar={{ fullName: 'Blanca Wheeler' }}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin (White background)">
+        <TitleBlock variant="admin" title="Admin Variant" avatar={{ fullName: 'Blanca Wheeler' }} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light (White background)">
+        <TitleBlock variant="light" title="Light Variant" avatar={{ fullName: 'Blanca Wheeler' }} />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
+export const StickerSheetVariantsWithSection: Story = {
+  name: 'Sticker Sheet (Variants With Section)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants">
+      <StickerSheet.Row header="Default (Purple background)">
+        <TitleBlock
+          title="Default Variant"
+          subtitle="This is the default purple variant with white text"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education (Blue background)">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          subtitle="This is the education variant with blue background"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin (White background)">
+        <TitleBlock
+          variant="admin"
+          title="Admin Variant"
+          subtitle="This is the admin variant with white background"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light (White background)">
+        <TitleBlock
+          variant="light"
+          title="Light Variant"
+          subtitle="This is the light variant with clean white background"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
+export const StickerSheetVariantsWithSectionTitleOnly: Story = {
+  name: 'Sticker Sheet (Section Title Only)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants">
+      <StickerSheet.Row header="Default (Purple background)">
+        <TitleBlock
+          title="Default Variant"
+          subtitle="This is the default purple variant with white text"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education (Blue background)">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          subtitle="This is the education variant with blue background"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin (White background)">
+        <TitleBlock
+          variant="admin"
+          title="Admin Variant"
+          subtitle="This is the admin variant with white background"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light (White background)">
+        <TitleBlock
+          variant="light"
+          title="Light Variant"
+          subtitle="This is the light variant with clean white background"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetVariantsWithCollapseNavigationAreaWhenPossible: Story = {
+  name: 'Sticker Sheet (Variants WithCollapseNavigationAreaWhenPossible)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants">
+      <StickerSheet.Row header="Default">
+        <TitleBlock
+          title="Default Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin">
+        <TitleBlock
+          variant="admin"
+          title="Admin Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light">
+        <TitleBlock
+          variant="light"
+          title="Light Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
 
 export const StickerSheetBreadcrumbs: Story = {
   name: 'Sticker Sheet (Breadcrumb)',
@@ -442,10 +629,66 @@ export const WithSection: Story = {
   },
   args: {
     title: 'A extra long title with over thirty characters so it truncates in a mobile viewport',
-    variant: 'light',
     sectionTitle: 'Section title',
     sectionTitleDescription: 'Description of section can go here',
     navigationTabs: undefined,
     surveyStatus: undefined,
   },
 }
+export const WithCustomSectionTitleOnly: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'Page title',
+    renderSectionTitle: () => (
+      <div>
+        <Heading className="m-0">Custom Section Title</Heading>
+      </div>
+    ),
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+    secondaryActions: undefined,
+    secondaryOverflowMenuItems: undefined,
+    primaryAction: undefined,
+    defaultAction: undefined,
+  },
+}
+
+export const WithTitleCollapseNavigationAreaWhenPossible: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'Page title',
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+    primaryAction: undefined,
+    defaultAction: undefined,
+    secondaryActions: undefined,
+    secondaryOverflowMenuItems: undefined,
+    breadcrumb: undefined,
+    avatar: undefined,
+    collapseNavigationAreaWhenPossible: true,
+  },
+}
+
+export const WithOnlySecondaryActions: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'Page title',
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+    primaryAction: undefined,
+    defaultAction: undefined,
+    sectionTitle: undefined,
+    sectionTitleDescription: undefined,
+    breadcrumb: undefined,
+    avatar: undefined,
+  },
+}

package/src/TitleBlock/subcomponents/MainActions.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Button, IconButton } from '~components/ButtonV1'
 import { Icon } from '~components/Icon'
 import { Menu, MenuList } from '~components/MenuV1'
@@ -24,6 +25,7 @@ type MainActionsProps = {
 }
 
 const renderSecondaryAndOverflowMenu = (
+  secondaryAndOverflowMenuLabel: string,
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
 ): JSX.Element | undefined => {
@@ -33,7 +35,7 @@ const renderSecondaryAndOverflowMenu = (
       align="right"
       button={
         <IconButton
-          label={'Open secondary and overflow menu'}
+          label={secondaryAndOverflowMenuLabel}
           reversed={reversed}
           icon={<Icon name="more_horiz" isPresentational />}
           id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
@@ -57,6 +59,13 @@ export const MainActions = ({
   secondaryOverflowMenuItems,
   reversed = false,
 }: MainActionsProps): JSX.Element => {
+  const { formatMessage } = useIntl()
+
+  const secondaryAndOverflowMenuLabel = formatMessage({
+    id: 'kzTitleBlock.secondaryAndOverflowMenuLabel',
+    defaultMessage: 'Open secondary and overflow menu',
+    description: 'Label for the dropdown menu which displays additional actions',
+  })
   let items
 
   // Build combined secondary + overflow menu items once, to be spread into the toolbar items
@@ -97,7 +106,7 @@ export const MainActions = ({
   if (allMenuItems.length > 0) {
     secondaryAndOverflowMenu.push({
       key: 'overflowMenu',
-      node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)!,
+      node: renderSecondaryAndOverflowMenu(secondaryAndOverflowMenuLabel, allMenuItems, reversed)!,
     })
   }
 
@@ -130,7 +139,12 @@ export const MainActions = ({
                 align="right"
                 button={
                   <IconButton
-                    label={'Open default action overflow menu'}
+                    label={formatMessage({
+                      id: 'kzTitleBlock.defaultActionMinimizedOverflowMenuLabel',
+                      defaultMessage: 'Open default action overflow menu',
+                      description:
+                        'Label for the dropdown menu which displays the default action item',
+                    })}
                     reversed={reversed}
                     icon={<Icon name="more_horiz" isPresentational />}
                     id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}

package/src/TitleBlock/subcomponents/SecondaryActions.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Button, IconButton } from '~components/ButtonV1'
 import { Icon } from '~components/Icon'
 import { Menu, MenuList } from '~components/MenuV1'
@@ -16,6 +17,8 @@ type Props = {
 }
 
 const renderSecondaryOverflowMenu = (
+  menuAriaLabel: string,
+  menuLabel: string,
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
 ): JSX.Element | undefined => {
@@ -28,7 +31,8 @@ const renderSecondaryOverflowMenu = (
           <Button
             secondary
             reversed={reversed}
-            label="Menu"
+            label={menuLabel}
+            aria-label={menuAriaLabel}
             data-automation-id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
             data-testid={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
             icon={<Icon name="keyboard_arrow_down" isPresentational />}
@@ -48,6 +52,7 @@ const renderSecondaryOverflowMenu = (
 
 // New: combined overflow menu (secondary actions converted + overflow menu items)
 const renderCombinedSecondaryOverflowMenu = (
+  combinedMenuLabel: string,
   secondaryActions?: SecondaryActionsProps,
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
@@ -66,7 +71,7 @@ const renderCombinedSecondaryOverflowMenu = (
         align="right"
         button={
           <IconButton
-            label="Open combined secondary + overflow menu"
+            label={combinedMenuLabel}
             reversed={reversed}
             icon={<Icon name="more_horiz" isPresentational />}
             id={`${TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}__combined`}
@@ -92,8 +97,29 @@ export const SecondaryActions = ({
   secondaryOverflowMenuItems,
   reversed = false,
 }: Props): JSX.Element | null => {
+  const { formatMessage } = useIntl()
+
   if (!secondaryActions && !secondaryOverflowMenuItems) return null
 
+  const menuLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuLabel',
+    defaultMessage: 'Menu',
+    description: 'Label for the dropdown menu which displays additional action items',
+  })
+
+  const menuAriaLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuAriaLabel',
+    defaultMessage: 'Opens overflow menu',
+    description: 'Aria Label for the dropdown menu which displays additional action items',
+  })
+
+  const combinedMenuLabel = formatMessage({
+    id: 'kzTitleBlock.combinedOverflowMenuLabel',
+    defaultMessage: 'Open combined secondary and overflow menu',
+    description:
+      'Label for the dropdown menu which displays additional action items and secondary actions',
+  })
+
   const secondaryActionsAsToolbarItems = secondaryActions
     ? secondaryActions.map((action, i) => {
         if ('menuItems' in action) {
@@ -148,8 +174,14 @@ export const SecondaryActions = ({
       })
     : []
 
-  const overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed)
+  const overflowMenu = renderSecondaryOverflowMenu(
+    menuAriaLabel,
+    menuLabel,
+    secondaryOverflowMenuItems,
+    reversed,
+  )
   const combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(
+    combinedMenuLabel,
     secondaryActions,
     secondaryOverflowMenuItems,
     reversed,