Refactor menu stories and add keyboard shortcuts story

code/core/src/manager/components/sidebar/Menu.stories.tsx

@@ -56,13 +56,13 @@ export const Expanded: Story = {
   globals: { sb_theme: 'light' },
   render: () => {
     const menu = useMenu(
-      { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
+      { whatsNewData: undefined } as State,
       {
         // @ts-expect-error (Converted from ts-ignore)
         getShortcutKeys: () => ({}),
         getAddonsShortcuts: () => ({}),
         versionUpdateAvailable: () => false,
-        isWhatsNewUnread: () => true,
+        isWhatsNewUnread: () => false,
         getDocsUrl: () => 'https://storybook.js.org/docs/',
       },
       false,
@@ -73,7 +73,7 @@ export const Expanded: Story = {
     );
     return (
       <DoubleThemeRenderingHack>
-        <SidebarMenu menu={menu} isHighlighted />
+        <SidebarMenu menu={menu} />
       </DoubleThemeRenderingHack>
     );
   },
@@ -96,14 +96,27 @@ export const Expanded: Story = {
   ],
 };
 
-export const ExpandedWithoutWhatsNew: Story = {
+export const ExpandedWithShortcuts: Story = {
   ...Expanded,
   render: () => {
     const menu = useMenu(
       { whatsNewData: undefined } as State,
       {
         // @ts-expect-error (invalid)
-        getShortcutKeys: () => ({}),
+        getShortcutKeys: () => ({
+          shortcutsPage: ['⌘', '⇧​', ','],
+          toggleNav: ['⌥', 'S'],
+          togglePanel: ['⌥', 'A'],
+          toolbar: ['⌥', 'T'],
+          panelPosition: ['⌥', 'D'],
+          fullScreen: ['⌥', 'F'],
+          search: ['⌥', 'K'],
+          prevComponent: ['⌥', '↑'],
+          nextComponent: ['⌥', '↓'],
+          prevStory: ['⌥', '←'],
+          nextStory: ['⌥', '→'],
+          collapseAll: ['⌥', '⇧', '↑'],
+        }),
         getAddonsShortcuts: () => ({}),
         versionUpdateAvailable: () => false,
         isWhatsNewUnread: () => false,
@@ -113,7 +126,7 @@ export const ExpandedWithoutWhatsNew: Story = {
       false,
       false,
       false,
-      false
+      true
     );
 
     return (
@@ -133,3 +146,41 @@ export const ExpandedWithoutWhatsNew: Story = {
     await expect(releaseNotes).not.toBeInTheDocument();
   },
 };
+
+export const ExpandedWithWhatsNew: Story = {
+  ...Expanded,
+  render: () => {
+    const menu = useMenu(
+      { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
+      {
+        // @ts-expect-error (invalid)
+        getShortcutKeys: () => ({}),
+        getAddonsShortcuts: () => ({}),
+        versionUpdateAvailable: () => false,
+        isWhatsNewUnread: () => true,
+        getDocsUrl: () => 'https://storybook.js.org/docs/',
+      },
+      false,
+      false,
+      false,
+      false,
+      false
+    );
+
+    return (
+      <DoubleThemeRenderingHack>
+        <SidebarMenu menu={menu} isHighlighted />
+      </DoubleThemeRenderingHack>
+    );
+  },
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await new Promise((res) => {
+      setTimeout(res, 500);
+    });
+    // @ts-expect-error (non strict)
+    await Expanded.play(context);
+    const releaseNotes = await canvas.queryByText(/What's new/);
+    await expect(releaseNotes).not.toBeInTheDocument();
+  },
+};