Upgrade salt and replace custom navigation item (#633)

.changeset/fluffy-onions-cry.md

@@ -0,0 +1,11 @@
+---
+'@jpmorganchase/mosaic-components': patch
+'@jpmorganchase/mosaic-labs-components': patch
+'@jpmorganchase/mosaic-content-editor-plugin': patch
+'@jpmorganchase/mosaic-layouts': patch
+'@jpmorganchase/mosaic-site': patch
+'@jpmorganchase/mosaic-site-components': patch
+'@jpmorganchase/mosaic-sitemap-component': patch
+---
+
+Updated Salt packages.

packages/components-labs/package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@jpmorganchase/mosaic-components": "^0.1.0-beta.82",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.82",
-    "@salt-ds/core": "^1.32.0",
+    "@salt-ds/core": "^1.33.0",
     "@vanilla-extract/css": "^1.6.0",
     "@vanilla-extract/recipes": "^0.2.1",
     "@vanilla-extract/sprinkles": "^1.3.0",

packages/components/package.json

@@ -46,8 +46,8 @@
   "dependencies": {
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.82",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.82",
-    "@salt-ds/core": "^1.32.0",
-    "@salt-ds/lab": "1.0.0-alpha.49",
+    "@salt-ds/core": "^1.33.0",
+    "@salt-ds/lab": "1.0.0-alpha.50",
     "@vanilla-extract/css": "^1.6.0",
     "@vanilla-extract/sprinkles": "^1.3.0",
     "@vanilla-extract/recipes": "^0.2.1",

packages/content-editor-plugin/package.json

@@ -43,9 +43,9 @@
   "dependencies": {
     "@jpmorganchase/mosaic-components": "^0.1.0-beta.82",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.82",
-    "@salt-ds/core": "^1.32.0",
+    "@salt-ds/core": "^1.33.0",
     "@salt-ds/icons": "^1.12.1",
-    "@salt-ds/lab": "1.0.0-alpha.49",
+    "@salt-ds/lab": "1.0.0-alpha.50",
     "@salt-ds/theme": "^1.19.0",
     "@floating-ui/react": "^0.26.6",
     "@lexical/code": "^0.11.1",

packages/layouts/package.json

@@ -46,7 +46,7 @@
     "@jpmorganchase/mosaic-site-components": "^0.1.0-beta.82",
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.82",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.82",
-    "@salt-ds/core": "^1.32.0",
+    "@salt-ds/core": "^1.33.0",
     "@vanilla-extract/css": "^1.6.0",
     "@vanilla-extract/sprinkles": "^1.3.0",
     "clsx": "^2.0.0",

packages/site-components/package.json

@@ -51,8 +51,8 @@
     "@jpmorganchase/mosaic-site-middleware": "^0.1.0-beta.82",
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.82",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.82",
-    "@salt-ds/core": "^1.32.0",
-    "@salt-ds/lab": "1.0.0-alpha.49",
+    "@salt-ds/core": "^1.33.0",
+    "@salt-ds/lab": "1.0.0-alpha.50",
     "@types/mdast": "^3.0.0",
     "@vanilla-extract/css": "^1.6.0",
     "@vanilla-extract/recipes": "^0.2.1",

packages/site-components/src/VerticalNavigation.tsx

@@ -1,6 +1,5 @@
 import React, { MouseEventHandler, useState } from 'react';
-import { StackLayout } from '@salt-ds/core';
-import { NavigationItem, NavigationItemRenderProps } from './NavigationItem';
+import { StackLayout, NavigationItem, NavigationItemProps } from '@salt-ds/core';
 import { Link } from '@jpmorganchase/mosaic-components';
 import { SidebarItem, SidebarNode } from '@jpmorganchase/mosaic-store';
 
@@ -13,15 +12,11 @@ export type VerticalNavigationProps = {
   menu: SidebarItem[];
 };
 
-const renderItem: React.FC<NavigationItemRenderProps<HTMLButtonElement | HTMLAnchorElement>> = ({
-  href,
-  isParent,
-  elementProps
-}) => {
-  if (isParent) {
-    return <button {...elementProps} />;
+const renderItem: NavigationItemProps['render'] = ({ href, ...rest }) => {
+  if (href) {
+    return <Link variant="component" {...rest} href={href} />;
   }
-  return <Link variant={'component'} {...elementProps} href={href} />;
+  return <button {...rest} />;
 };
 
 const renderNavigationItem = (

packages/site-components/src/__tests__/VerticalNavigation.test.tsx

@@ -3,8 +3,6 @@ import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvents from '@testing-library/user-event';
 import { VerticalNavigation } from '../VerticalNavigation';
 
-jest.mock('@salt-ds/core/dist-es/navigation-item/NavigationItem.css.js', () => {});
-
 describe('GIVEN a VerticalNavigation', () => {
   it('THEN it should render a link when a group contains < 2 pages and be active when on its subroute', () => {
     const singlePageInGroupMenu = [
@@ -33,10 +31,8 @@ describe('GIVEN a VerticalNavigation', () => {
     );
     // assert
     expect(screen.getByText('Group', { exact: true })).toBeVisible();
-    expect(screen.queryByRole('link', { name: 'change page' })).toHaveClass(
-      'saltNavigationItem-active'
-    );
-    expect(screen.queryByLabelText('expand')).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Group' })).toHaveClass('saltNavigationItem-active');
+    expect(screen.queryByRole('link', { name: 'Option 1' })).not.toBeInTheDocument();
   });
 
   it('THEN it should render a group when it contains > 2 pages', () => {
@@ -73,7 +69,7 @@ describe('GIVEN a VerticalNavigation', () => {
     );
     // assert
     expect(screen.getByText('Group', { exact: true })).toBeVisible();
-    expect(screen.queryByRole('button', { name: 'expand' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Group' })).toBeInTheDocument();
     const links = screen.getAllByRole('link');
     expect(within(links[0]).getByText('Option 1')).toBeInTheDocument();
     expect(within(links[1]).getByText('Option 2')).toBeInTheDocument();
@@ -113,7 +109,7 @@ describe('GIVEN a VerticalNavigation', () => {
     );
     // assert
     expect(screen.getByText('Group', { exact: true })).toBeVisible();
-    expect(screen.queryByLabelText('expand')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Group' })).toBeInTheDocument();
     const links = screen.getAllByRole('link');
     expect(links.length).toEqual(2);
     expect(within(links[0]).getByText('Option 1')).toBeInTheDocument();
@@ -154,9 +150,9 @@ describe('GIVEN a VerticalNavigation', () => {
     );
     // assert
     expect(screen.getByText('Group', { exact: true })).toBeVisible();
-    expect(screen.queryByLabelText('expand')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Group' })).toBeInTheDocument();
     expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    await userEvents.click(screen.getByLabelText('expand'));
+    await userEvents.click(screen.getByRole('button', { name: 'Group' }));
     // action - expand row
     await waitFor(() => expect(screen.queryAllByRole('link').length).toEqual(2));
     // assert
@@ -170,7 +166,7 @@ describe('GIVEN a VerticalNavigation', () => {
     );
     await waitFor(() => expect(screen.queryAllByRole('link').length).toEqual(2));
     // action - collapse row
-    await userEvents.click(screen.getByLabelText('expand'));
+    await userEvents.click(screen.getByRole('button', { name: 'Group' }));
     // assert
     await waitFor(() => expect(screen.queryAllByRole('link').length).toEqual(0));
   });

packages/site/e2e/layout.detailOverview.test.ts

@@ -22,10 +22,11 @@ test.describe('GIVEN a page with the `DetailOverview` Layout', () => {
 
   test('THEN there is a sidebar', async ({ page }) => {
     await page.goto('/mosaic/test/layouts/detail-overview');
-    await expect(page.getByTestId('vertical-navigation')).toBeVisible();
-    await expect(page.getByLabel('change page')).toHaveCount(3);
+    const navigation = page.getByTestId('vertical-navigation');
+    await expect(navigation).toBeVisible();
+    await expect(navigation.locator(page.getByRole('link'))).toHaveCount(3);
     await expect(page.getByText('Test', { exact: true })).toBeVisible();
-    await expect(page.getByLabel('expand')).toHaveCount(2);
+    await expect(navigation.locator(page.getByRole('button'))).toHaveCount(2);
     await expect(page.getByText('Layouts', { exact: true })).toBeVisible();
     await expect(page.getByText('Refs Test', { exact: true })).toBeVisible();
     await expect(page.getByText('Aliases Test', { exact: true })).toBeVisible();

packages/site/e2e/layout.detailTechnical.test.ts

@@ -22,10 +22,11 @@ test.describe('GIVEN a page with the `DetailTechnical` Layout', () => {
 
   test('THEN there is a sidebar', async ({ page }) => {
     await page.goto('/mosaic/test/layouts/detail-technical');
-    await expect(page.getByTestId('vertical-navigation')).toBeVisible();
-    await expect(page.getByLabel('change page')).toHaveCount(3);
+    const navigation = page.getByTestId('vertical-navigation');
+    await expect(navigation).toBeVisible();
+    await expect(navigation.locator(page.getByRole('link'))).toHaveCount(3);
     await expect(page.getByText('Test', { exact: true })).toBeVisible();
-    await expect(page.getByLabel('expand')).toHaveCount(2);
+    await expect(navigation.locator(page.getByRole('button'))).toHaveCount(2);
     await expect(page.getByText('Layouts', { exact: true })).toBeVisible();
     await expect(page.getByText('Refs Test', { exact: true })).toBeVisible();
     await expect(page.getByText('Aliases Test', { exact: true })).toBeVisible();