Merge branch 'main' of https://github.com/chanzuckerberg/sci-components into prod

Author: masoudmanson

.github/workflows/release.yml

@@ -86,16 +86,18 @@ jobs:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         run: yarn publish:ci
 
+      # Post breaking changes to a Slack channel is temporarily disabled
+      # since the Slack webhook URL is not available in the workflow environment
       # Step 12: Post breaking changes to a Slack channel
-      - name: Post breaking changes to a Slack channel
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SDS_BREAKING_CHANGES_SLACK_WEBHOOK }}
-        uses: act10ns/slack@v1
-        with:
-          status: complete
-          channel: "#sci-design-system-breaking-changes"
-          config: .github/config/slack.yml
-        if: contains(toJson(github.event.commits.*.message), 'BREAKING CHANGE')
+      # - name: Post breaking changes to a Slack channel
+      #   env:
+      #     SLACK_WEBHOOK_URL: ${{ secrets.SDS_BREAKING_CHANGES_SLACK_WEBHOOK }}
+      #   uses: act10ns/slack@v1
+      #   with:
+      #     status: complete
+      #     channel: "#sci-design-system-breaking-changes"
+      #     config: .github/config/slack.yml
+      #   if: contains(toJson(github.event.commits.*.message), 'BREAKING CHANGE')
 
       # Step 13: Merge prod branch into main
       - name: Create PR to merge prod into main

packages/components/src/core/NavigationHeader/NavigationHeader.types.ts

@@ -29,6 +29,11 @@ export interface NavigationHeaderProps<T extends string = string>
   setDrawerOpen?: (open: boolean) => void;
   menuProps?: Partial<MenuProps>;
   sdsStyle?: "dropdown" | "drawer";
+  onDrawerStyleNavItemHover?: (
+    item:
+      | NavigationHeaderPrimaryNavItem<T>
+      | NavigationHeaderSecondaryNavItem<T>
+  ) => void;
   isSticky?: boolean;
   topComponentSlot?: ReactNode;
 }

packages/components/src/core/NavigationHeader/__storybook__/stories/drawerStyle.tsx

@@ -117,13 +117,19 @@ export const DrawerStyleDemo = (
   return (
     <>
       <RawNavigationHeader
-        {...rest}
         primaryNavItems={primaryNavItems}
         secondaryNavItems={secondaryNavItems}
         backgroundAppearance={backgroundAppearance}
         title={title}
         activePrimaryNavKey={activePrimaryNavKey}
         setActivePrimaryNavKey={setActivePrimaryNavKey}
+        onDrawerStyleNavItemHover={(item) => {
+          console.log(
+            "NavigationHeader onDrawerStyleNavItemHover called with item:",
+            item
+          );
+        }}
+        {...rest}
       />
       <Container>
         <Box>

packages/components/src/core/NavigationHeader/__tests__/index.test.tsx

@@ -116,6 +116,20 @@ describe("<NavigationHeader />", () => {
     expect(onClickMock).toHaveBeenCalled();
   });
 
+  it("triggers onDrawerStyleNavItemHover when hovering over a drawer item", () => {
+    const onDrawerStyleNavItemHover = jest.fn();
+    const { DrawerStyle } = composeStories(stories);
+
+    render(
+      <DrawerStyle onDrawerStyleNavItemHover={onDrawerStyleNavItemHover} />
+    );
+
+    const productsItem = screen.getAllByText("Products")[0];
+    fireEvent.mouseEnter(productsItem);
+
+    expect(onDrawerStyleNavItemHover).toHaveBeenCalled();
+  });
+
   it("matches the snapshot", () => {
     const { asFragment } = render(<DropdownStyle />);
     expect(asFragment()).toMatchSnapshot();

packages/components/src/core/NavigationHeader/components/NavigationHeaderPrimaryNav/index.tsx

@@ -95,6 +95,7 @@ export interface NavigationHeaderPrimaryNavProps<T extends string> {
   onDrawerStateChange?: (isOpen: boolean) => void;
   topOffset?: number;
   onClose?: () => void;
+  onDrawerStyleNavItemHover?: (item: NavigationHeaderPrimaryNavItem<T>) => void;
 }
 
 export default function NavigationHeaderPrimaryNav<T extends string>({
@@ -112,6 +113,7 @@ export default function NavigationHeaderPrimaryNav<T extends string>({
   onDrawerStateChange,
   topOffset = 0,
   onClose: onCloseProp,
+  onDrawerStyleNavItemHover,
 }: NavigationHeaderPrimaryNavProps<T>) {
   const theme: SDSTheme = useTheme();
 
@@ -202,6 +204,7 @@ export default function NavigationHeaderPrimaryNav<T extends string>({
       <StyledHoverDrawerContainer
         key={key}
         onMouseEnter={() => {
+          onDrawerStyleNavItemHover?.(item);
           if (clickedDrawerKey !== key) {
             onDrawerOpen(key);
           }

packages/components/src/core/NavigationHeader/components/NavigationHeaderSecondaryNav/index.tsx

@@ -68,6 +68,9 @@ export interface NavigationHeaderSecondaryNavProps<T extends string> {
   onDrawerStateChange?: (isOpen: boolean) => void;
   topOffset?: number;
   onClose?: () => void;
+  onDrawerStyleNavItemHover?: (
+    item: NavigationHeaderSecondaryNavItem<T>
+  ) => void;
 }
 
 export default function NavigationHeaderSecondaryNav<T extends string>({
@@ -83,6 +86,7 @@ export default function NavigationHeaderSecondaryNav<T extends string>({
   onDrawerStateChange,
   topOffset = 0,
   onClose: onCloseProp,
+  onDrawerStyleNavItemHover,
 }: NavigationHeaderSecondaryNavProps<T>) {
   const theme: SDSTheme = useTheme();
 
@@ -141,7 +145,10 @@ export default function NavigationHeaderSecondaryNav<T extends string>({
     return (
       <StyledHoverDrawerContainer
         key={key}
-        onMouseEnter={() => onDrawerOpen(key)}
+        onMouseEnter={() => {
+          onDrawerStyleNavItemHover?.(item);
+          onDrawerOpen(key);
+        }}
         onMouseLeave={onDrawerClose}
       >
         <UnifiedNavItem

packages/components/src/core/NavigationHeader/index.tsx

@@ -76,6 +76,7 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
       setDrawerOpen: onDrawerOpenChange,
       isSticky = true,
       topComponentSlot,
+      onDrawerStyleNavItemHover,
       ...rest
     } = props;
     const navRef = useRef<HTMLDivElement>(null);
@@ -314,7 +315,7 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
         primaryNavItems.length > 0 && (
           <NavigationHeaderPrimaryNav
             items={primaryNavItems}
-            value={activePrimaryNavKey}
+            value={activePrimaryNavKey as T}
             onChange={setActivePrimaryNavKey}
             hasInvertedStyle={hasInvertedStyle}
             isNarrow={dimensions.isNarrow}
@@ -327,6 +328,7 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
             onDrawerStateChange={handlePrimaryDrawerStateChange}
             topOffset={topOffset}
             onClose={() => setDrawerOpen(false)}
+            onDrawerStyleNavItemHover={onDrawerStyleNavItemHover}
           />
         )
       );
@@ -349,6 +351,7 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
             onDrawerStateChange={handleSecondaryDrawerStateChange}
             topOffset={topOffset}
             onClose={() => setDrawerOpen(false)}
+            onDrawerStyleNavItemHover={onDrawerStyleNavItemHover}
           />
         )
       );

packages/components/src/core/styles/common/makeThemeOptions.ts

@@ -535,6 +535,7 @@ export function makeThemeOptions(
       appTheme.spacing.l,
       appTheme.spacing.xl,
       appTheme.spacing.xxl,
+      appTheme.spacing.xxxl,
     ],
     transitions: {
       duration: {

packages/mcp/data/component-props/Banner.json

@@ -14,7 +14,7 @@
         "isRequired": false
       },
       "intent": {
-        "type": "\"info\" | \"negative\" | \"notice\" | \"positive\"",
+        "type": "\"accent\" | \"info\" | \"negative\" | \"notice\" | \"positive\"",
         "isRequired": false
       },
       "sdsIconProps": {

packages/mcp/data/component-props/Callout.json

@@ -23,7 +23,7 @@
         "description": "Override the icon displayed before the children.\nUnless provided, the icon is mapped to the value of the `severity` prop.\nSet to `false` to remove the `icon`."
       },
       "intent": {
-        "type": "\"info\" | \"negative\" | \"notice\" | \"positive\"",
+        "type": "\"info\" | \"accent\" | \"negative\" | \"notice\" | \"positive\"",
         "isRequired": true
       },
       "sdsStyle": {