@kaizen/components 2.2.4 → 2.3.1

package/dist/styles.css

@@ -10018,199 +10018,33 @@
     margin-inline-end: 0;
     margin-inline-start: calc(1.5rem / 2);
   }
-  @container (max-width: calc(768px - 1px)) {
-    .MainActions-module_mainActionsContainer__pk-78 {
-      display: none;
-    }
-  }
-}
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/* 16px */
-/* 16px */
-/* 16px */
-/*
-  Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
-  as this is what consumers would have expected when pulling them in a the time.
-*/
-/* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
-/** THIS IS AN AUTOGENERATED FILE **/
-@layer kz-components {
-  /* stylelint-disable no-descending-specificity */
-  .MobileActions-module_mobileActionsContainer__XoepA {
+  .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
     display: none;
-    z-index: 1030;
-    flex-direction: column;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    transform: translateY(calc(100% - 60px));
-    transition: 0.4s ease;
-    animation: MobileActions-module_slide-up__xezn3 1s ease;
-  }
-  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 {
-    transform: translateY(0%);
-  }
-  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 .MobileActions-module_mobileActionsMenuContainer__x--Eb {
-    visibility: visible;
-  }
-  @container (max-width: calc(768px - 1px)) {
-    .MobileActions-module_mobileActionsContainer__XoepA {
-      display: flex;
-    }
-  }
-  .MobileActions-module_mobileActionsTopRow__RXNFZ {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 60px;
-  }
-  .MobileActions-module_mobileActionsTopRow__RXNFZ.MobileActions-module_mobileActionsTopRowSingleButton__5EjiI {
-    justify-content: center;
-  }
-  .MobileActions-module_mobileActionsMenuContainer__x--Eb {
-    visibility: hidden;
-    width: 100%;
-    background: var(--color-white, #ffffff);
-    padding: var(--spacing-xs, 0.375rem) 0;
-    transition: visibility 0.4s;
-  }
-  .MobileActions-module_drawerHandleIcon__q9ewm {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-inline-end: calc(1.5rem / 2);
-    margin-inline-start: 0;
-  }
-  .MobileActions-module_drawerHandleLabelText__MwJTA + .MobileActions-module_drawerHandleIcon__q9ewm {
     margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 2);
-  }
-  .MobileActions-module_mobileActionsPrimaryLabel__8yfuH {
-    text-align: left;
-    text-decoration: none;
-    color: var(--color-white, #ffffff);
-    font-family: var(--typography-button-primary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-button-primary-font-weight, 500);
-    font-size: var(--typography-button-primary-font-size, 1.125rem);
-    line-height: var(--typography-button-primary-line-height, 1.5rem);
-    letter-spacing: var(--typography-button-primary-letter-spacing, normal);
-    padding-inline-end: 0;
-    padding-inline-start: 1.125rem;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU {
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-    border: 0;
-    box-sizing: border-box;
-    color: var(--color-white, #ffffff);
-    background-color: var(--color-blue-500, #0168b3);
   }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus {
-    background-color: var(--color-blue-600, #004970);
-    outline: none;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible {
-    height: 52px;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible::after,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-width: 2px;
-    border-style: var(--border-focus-ring-border-style, solid);
-    border-color: var(--color-blue-500, #0168b3);
-    inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2));
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:hover,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:hover {
-    text-decoration: none;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child {
-    flex-basis: 100%;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible {
-    flex-basis: calc(100% - 8px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible::after,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible::after {
-    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
-    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child) {
-    flex: 0 0 calc(100% - 3.75rem);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible {
-    flex-basis: calc(100% - 3.75rem - 8px);
-    margin-left: 4px;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible + .MobileActions-module_mobileActionsExpandButton__XuHNU {
-    border-color: var(--color-white, #ffffff);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible::after {
-    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child) {
-    flex: 0 0 3.75rem;
-    border-left: 2px solid var(--color-blue-200, #bde2f5);
-    justify-content: center;
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible {
-    border-color: var(--color-white, #ffffff);
-    flex-basis: calc(3.75rem - 8px);
-    margin-right: 4px;
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible::after {
-    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsChevronSquare__SPIsI {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: absolute;
-    inset-inline-end: 20px;
-    inset-inline-start: auto;
-  }
-  /* stylelint-enable no-descending-specificity */
-}
-@keyframes MobileActions-module_slide-up__xezn3 {
-  0% {
-    transform: translateY(100%);
-  }
-  50% {
-    transform: translateY(100%);
-  }
-  100% {
-    transform: translateY(calc(100% - 60px));
+  @container (max-width: 511px) {
+    .MainActions-module_mainActionsContainer__pk-78 {
+      padding-top: 12px;
+      justify-content: flex-start;
+      padding-left: 1.25rem;
+    }
+    @media (max-width: 511px) {
+      .MainActions-module_mainActionsContainer__pk-78 {
+        padding-top: 0;
+        padding-left: 3.375rem;
+      }
+    }
+    @media (max-width: 360px) {
+      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
+        display: none;
+        margin-inline-end: 0;
+      }
+      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
+        display: flex;
+        margin-inline-end: 3px;
+        margin-left: -0.5rem;
+      }
+    }
   }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10259,19 +10093,28 @@
       display: none;
     }
   }
-  .TitleBlock-module_titleRow__Ifqiu,
+  .TitleBlock-module_titleRow__Ifqiu {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
   .TitleBlock-module_rowBelowSeparator__H4E63 {
     display: flex;
     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: 3px;
+    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 3px;
+    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
     max-width: 1392px;
@@ -10289,6 +10132,16 @@
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
     border-bottom: 1px solid var(--color-gray-300, #eaeaec);
   }
+  @container (max-width: 511px) {
+    .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
+      padding-bottom: 12px;
+    }
+  }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparatorInner__3gNec {
+      height: 3.75rem;
+    }
+  }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     position: relative;
     display: flex;
@@ -10296,7 +10149,7 @@
     align-items: center;
     min-height: 5.25rem;
     justify-content: space-between;
-    border-bottom: 0.1875rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+    border-bottom: 0.063rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
     border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
@@ -10309,6 +10162,11 @@
       border-bottom: none;
     }
   }
+  @container (max-width: 511px) {
+    .TitleBlock-module_titleRowInnerContent__NhTHV {
+      flex-wrap: wrap;
+    }
+  }
   .TitleBlock-module_title__c5JWR {
     display: flex;
     align-items: center;
@@ -10391,10 +10249,10 @@
   }
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
-      font-size: var(--typography-heading-4-font-size, 1.125rem);
-      line-height: var(--typography-heading-4-line-height, 1.5rem);
-      letter-spacing: var(--typography-heading-4-letter-spacing, normal);
-      padding: 0;
+      font-size: var(--typography-heading-3-font-size, 1.375rem);
+      line-height: var(--typography-heading-3-line-height, 1.875rem);
+      letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+      padding: 8px 0;
     }
   }
   .TitleBlock-module_avatar__mEjJ8 {
@@ -10429,7 +10287,6 @@
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_hamburger__qe4R0 {
       display: flex;
-      align-items: center;
     }
   }
   .TitleBlock-module_subtitle__AI9tj {
@@ -10529,9 +10386,14 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
-    margin-top: -0.1875rem;
+    margin-top: -0.063rem;
     justify-content: space-between;
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
+      height: 3.75rem;
+    }
+  }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
     display: flex;
     min-width: 0;
@@ -10585,6 +10447,8 @@
   }
   @container (max-width: calc(768px - 1px)) {
     .TitleBlock-module_hasNavigationTabs__v09jL .TitleBlock-module_navigationTabScrollerContainer__o234q {
+      margin-top: 0.063rem;
+      height: 3.75rem;
       display: block;
       overflow-x: scroll;
       scrollbar-width: none;
@@ -10612,7 +10476,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.5625rem;
+      top: 3.687rem;
       width: 3.75rem;
       height: 3.75rem;
       background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));
@@ -10665,10 +10529,17 @@
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
     color: var(--color-blue-500, #0168b3);
   }
+  .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
+    display: none;
+  }
   @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_secondaryActionsContainer__-4q0l {
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryButtonContainer__xFL9X,
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowMenu__gvmgW {
       display: none;
     }
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
+      display: flex;
+    }
   }
   .TitleBlock-module_breadcrumb__lVNKz {
     appearance: none;
@@ -10717,11 +10588,6 @@
       }
     }
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_breadcrumb__lVNKz {
-      display: none;
-    }
-  }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
     clip-path: rect(0 0 0 0);
     height: 1px;
@@ -10815,6 +10681,11 @@
     color: var(--color-blue-500, #0168b3);
     background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
   }
+  @container (max-width: calc(1080px - 1px)) {
+    .TitleBlock-module_circle__68z-T {
+      display: none;
+    }
+  }
   /* stylelint-enable no-descending-specificity */
 }
 @keyframes TitleBlock-module_slide-fade__o5TnP {

package/dist/types/TitleBlock/TitleBlock.d.ts

@@ -4,6 +4,6 @@ import { type TitleBlockProps } from './types';
  * {@link https://cultureamp.design/?path=/docs/components-titleblock-api-specification--docs Storybook}
  */
 export declare const TitleBlock: {
-    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, autoHideMobileActionsMenu, }: TitleBlockProps): JSX.Element;
+    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
     displayName: string;
 };

package/dist/types/TitleBlock/subcomponents/MainActions.d.ts

@@ -1,13 +1,14 @@
-import { type DefaultActionProps, type PrimaryActionProps, type TitleBlockMenuItemProps } from '../types';
+import { type DefaultActionProps, type PrimaryActionProps, type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types';
 type MainActionsProps = {
     primaryAction?: PrimaryActionProps;
     defaultAction?: DefaultActionProps;
     reversed?: boolean;
-    overflowMenuItems?: TitleBlockMenuItemProps[];
+    secondaryActions?: SecondaryActionsProps;
+    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
     showOverflowMenu?: boolean;
 };
 export declare const MainActions: {
-    ({ primaryAction, defaultAction, reversed, overflowMenuItems, showOverflowMenu, }: MainActionsProps): JSX.Element;
+    ({ primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, reversed, }: MainActionsProps): JSX.Element;
     displayName: string;
 };
 export {};

package/package.json

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

package/src/TitleBlock/TitleBlock.module.scss

@@ -14,7 +14,7 @@
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
-  $title-block-separator-height: 0.1875rem;
+  $title-block-separator-height: 0.063rem;
   $tab-container-height-default: $ca-grid * 3;
   $tab-container-height-small: $ca-grid * 2.5;
   $tab-container-height-default-collapsed: 0;
@@ -48,21 +48,30 @@
     }
   }
 
-  .titleRow,
+  .titleRow {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+
   .rowBelowSeparator {
     display: flex;
     width: 100%;
     justify-content: center;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .lightVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
+    margin-bottom: $title-block-separator-height;
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
+    margin-bottom: $title-block-separator-height;
   }
 
   %titleBlockInner {
@@ -84,10 +93,18 @@
 
   .lightVariant .titleRowInner {
     border-bottom: 1px solid $color-gray-300;
+
+    @include title-block-xsmall {
+      padding-bottom: 12px;
+    }
   }
 
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .titleRowInnerContent {
@@ -112,6 +129,10 @@
     @include title-block-medium-and-small {
       border-bottom: none;
     }
+
+    @include title-block-xsmall {
+      flex-wrap: wrap;
+    }
   }
 
   .title {
@@ -202,10 +223,10 @@
     }
 
     @include title-block-medium-and-small {
-      font-size: $typography-heading-4-font-size;
-      line-height: $typography-heading-4-line-height;
-      letter-spacing: $typography-heading-4-letter-spacing;
-      padding: 0;
+      font-size: $typography-heading-3-font-size;
+      line-height: $typography-heading-3-line-height;
+      letter-spacing: $typography-heading-3-letter-spacing;
+      padding: 8px 0;
     }
   }
 
@@ -243,7 +264,6 @@
 
     @include title-block-medium-and-small {
       display: flex;
-      align-items: center;
     }
   }
 
@@ -353,6 +373,10 @@
     width: 100%;
     margin-top: -$title-block-separator-height;
     justify-content: space-between;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .titleAndAdjacent {
@@ -418,6 +442,8 @@
   .navigationTabScrollerContainer {
     .hasNavigationTabs & {
       @include title-block-small {
+        margin-top: $title-block-separator-height;
+        height: $tab-container-height-small;
         display: block;
         overflow-x: scroll;
         scrollbar-width: none;
@@ -518,9 +544,20 @@
       color: $color-blue-500;
     }
 
-    @include title-block-medium-and-small {
+    .secondaryOverflowCombinedMenu {
       display: none;
     }
+
+    @include title-block-medium-and-small {
+      .secondaryButtonContainer,
+      .secondaryOverflowMenu {
+        display: none;
+      }
+
+      .secondaryOverflowCombinedMenu {
+        display: flex;
+      }
+    }
   }
 
   .breadcrumb {
@@ -570,10 +607,6 @@
         @include ca-position($start: 0);
       }
     }
-
-    @include title-block-medium-and-small {
-      display: none;
-    }
   }
 
   @mixin visually-hidden {
@@ -696,6 +729,10 @@
       color: $color-blue-500;
       background-color: rgba($color-blue-500-rgb, 0.1);
     }
+
+    @include title-block-medium-and-small {
+      display: none;
+    }
   }
   /* stylelint-enable no-descending-specificity */
 }