touch up examples and guidance

Author: LinKCoding

packages/styleguide/src/lib/Molecules/Menu/Menu.mdx

@@ -1,6 +1,11 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader, ImageWrapper, LinkTo } from '~styleguide/blocks';
+import {
+  ComponentHeader,
+  ImageWrapper,
+  LinkTo,
+  Callout,
+} from '~styleguide/blocks';
 
 import * as MenuStories from './Menu.stories';
 
@@ -67,6 +72,18 @@ Use a Menu to organize and present a list of actions, options, or navigation lin
 
 ## Variants
 
+In both `popover` and `fixed` variants of `Menu`, you can set the `active` and `disabled` states on the `MenuItem` children. The `active` state indicates the currently selected item, while the `disabled` state indicates that an item is unavailable for interaction. You can optionally use the `label` prop to render a ToolTip explaining why a `MenuItem` is disabled—see the "Icon-Only Menus + ToolTips" section for more details.
+
+<Callout
+  text={
+    <>
+      The <code>Menu</code> component is stateless, you'll need to implement the
+      logic to manage the <code>active</code> and <code>disabled</code> states
+      of <code>MenuItem</code> components.
+    </>
+  }
+/>
+
 ### Popover
 
 Use the Popover menu to present a temporary surface for actions, options, or links, ensuring access only when needed while keeping the interface clean and focused. The Popover menu has the `menu` role by default. But, if the menu contains only a list of navigation links, it should be nested in a `<nav>` element, which implicitly includes the `navigation` role.

packages/styleguide/src/lib/Molecules/Menu/Menu.stories.tsx

@@ -54,16 +54,29 @@ export const Popover: Story = {
     variant: 'popover',
     children: (
       <>
-        <MenuItem onClick={() => null} disabled>
-          Menu Item
-        </MenuItem>
-        <MenuItem active onClick={() => null} disabled>
+        <MenuItem onClick={() => null}>Menu Item</MenuItem>
+        <MenuItem active onClick={() => null}>
           Active Item
         </MenuItem>
         <MenuItem icon={MultipleUsersIcon} onClick={() => null}>
           Icon Item
         </MenuItem>
-        <MenuItem onClick={() => null}>Menu Item</MenuItem>
+        <MenuItem disabled onClick={() => null}>
+          Disabled Item
+        </MenuItem>
+        <MenuItem
+          disabled
+          label={{
+            info: 'This is disabled because...',
+            alignment: 'left-center',
+          }}
+          onClick={() => null}
+        >
+          Disabled item with ToolTip
+        </MenuItem>
+        <MenuItem active disabled onClick={() => null}>
+          Active Item and disabled FOR TESTING -- will delete after!
+        </MenuItem>
       </>
     ),
   },
@@ -75,21 +88,28 @@ export const Fixed: Story = {
     children: (
       <>
         <MenuItem href="#">Menu Item</MenuItem>
+        <MenuItem href="#" active>
+          Active Item
+        </MenuItem>
+        <MenuItem href="#" icon={MultipleUsersIcon}>
+          Icon Item
+        </MenuItem>
+        <MenuItem disabled onClick={() => null}>
+          Disabled Item
+        </MenuItem>
         <MenuItem
-          active
-          href="#"
           disabled
           label={{
             info: 'This is disabled because...',
-            alignment: 'top-center',
+            alignment: 'left-center',
           }}
+          onClick={() => null}
         >
-          Active Item
+          Menu Item
         </MenuItem>
-        <MenuItem href="#" icon={MultipleUsersIcon}>
-          Icon Item
+        <MenuItem active disabled onClick={() => null}>
+          Active Item and disabled FOR TESTING -- will delete after!
         </MenuItem>
-        <MenuItem href="#">Menu Item</MenuItem>
       </>
     ),
   },