@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/src/MenuGroup/MenuGroup.stories.tsx

@@ -0,0 +1,248 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Banner } from "@sproutsocial/seeds-react-banner";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Token } from "@sproutsocial/seeds-react-token";
+
+import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import {
+  ActionMenu,
+  MenuGroup,
+  MenuItem,
+  SingleSelectMenu,
+  MenuContent,
+  MenuHeader,
+  MultiSelectMenu,
+} from "../index";
+
+const meta: Meta<typeof MenuGroup> = {
+  title: "Under Development/Primitives/MenuGroup",
+  component: MenuGroup,
+  decorators: [
+    (Story) => (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+  argTypes: {
+    title: {
+      table: {
+        category: "MenuGroup",
+      },
+      description: "Change title of group title",
+      control: "text",
+    },
+    titleAs: {
+      table: {
+        category: "MenuGroup",
+      },
+      description: "Example options for title component",
+      options: ["h3", "h2", "h1", "p"],
+      control: { type: "select" },
+    },
+  },
+  args: {
+    titleAs: "h3",
+    title: "Group Example",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuGroup>;
+
+const menuItemsOne = [
+  { id: "item-1", label: "Item 1" },
+  { id: "item-2", label: "Item 2" },
+  { id: "item-3", label: "Item 3" },
+];
+
+const menuItemsTwo = [
+  { id: "item-4", label: "Item 4" },
+  { id: "item-5", label: "Item 5" },
+  { id: "item-6", label: "Item 6" },
+];
+
+const menuItemsThree = [
+  { id: "item-7", label: "Item 7" },
+  { id: "item-8", label: "Item 8" },
+  { id: "item-9", label: "Item 9" },
+];
+
+const itemsAsProps = [
+  {
+    id: "item-1",
+    children: "Item 1",
+    onClick: () => alert("Item 1 clicked"),
+  },
+  { id: "item-2", children: "Item 2", onClick: () => alert("Item 2 clicked") },
+  { id: "item-3", children: "Item 3", href: "https://seeds.sproutsocial.com/" },
+];
+
+export const ItemsAsProps: Story = {
+  name: "Items as Props",
+  render: () => {
+    return (
+      <ActionMenu
+        defaultIsOpen
+        menuToggleElement={<StorybookMenuToggleButton />}
+      >
+        <MenuContent>
+          <MenuGroup id="1" menuItems={itemsAsProps} title="Group 1" />
+          <MenuGroup id="2" title="Group 2">
+            <MenuItem id="item-4" onClick={() => alert("Item 4 clicked")}>
+              Item 4
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+  },
+};
+
+export const StandardGroup: Story = {
+  name: "Standard Group",
+  render: (args) => {
+    return (
+      <SingleSelectMenu
+        defaultIsOpen
+        menuToggleElement={<StorybookMenuToggleButton />}
+      >
+        <MenuContent>
+          <MenuGroup title={args.title} titleAs={args.titleAs} id="items">
+            {menuItemsOne.map(({ id, label }) => (
+              <MenuItem key={id} id={id}>
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+export const GroupWithItems: Story = {
+  name: "Multiple Menu Groups",
+  args: {
+    title: "Menu Group Title",
+  },
+  render: (args) => {
+    return (
+      <SingleSelectMenu
+        defaultIsOpen
+        menuToggleElement={<StorybookMenuToggleButton />}
+      >
+        <MenuContent>
+          <MenuGroup id="items" title={args.title} titleAs={args.titleAs}>
+            {menuItemsOne.map(({ id, label }) => (
+              <MenuItem key={id} id={id}>
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuGroup id="items-2" title={args.title} titleAs={args.titleAs}>
+            {menuItemsTwo.map(({ id, label }) => (
+              <MenuItem key={id} id={id}>
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuGroup id="items-3" title={args.title} titleAs={args.titleAs}>
+            {menuItemsThree.map(({ id, label }) => (
+              <MenuItem key={id} id={id}>
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+export const DifferentInputTypes: Story = {
+  name: "Different Input Types",
+  args: {
+    title: "Menu Group Title",
+  },
+  render: ({ title, titleAs }) => {
+    return (
+      <MultiSelectMenu
+        defaultIsOpen
+        menuToggleElement={<StorybookMenuToggleButton />}
+      >
+        <MenuContent>
+          <MenuGroup id="items" title={title} titleAs={titleAs}>
+            {menuItemsOne.map(({ id, label }) => (
+              <MenuItem key={id} id={id} inputType="checkbox">
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuGroup
+            id="items-2"
+            title="Select One"
+            titleAs={titleAs}
+            isSingleSelect
+          >
+            {menuItemsTwo.map(({ id, label }) => (
+              <MenuItem key={id} id={id} inputType="radio">
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+  },
+};
+
+type customContentStory = StoryObj<
+  React.ComponentProps<typeof MenuGroup> & {
+    bannerText: string;
+  }
+>;
+
+export const CustomContent: customContentStory = {
+  name: "Custom Content",
+  args: {
+    title: "Menu Group Title",
+    bannerText: "Only one item can be selected",
+  },
+  render: ({ title, bannerText }: { title?: string; bannerText?: string }) => {
+    return (
+      <SingleSelectMenu
+        defaultIsOpen
+        menuToggleElement={<StorybookMenuToggleButton />}
+      >
+        <MenuContent>
+          <MenuHeader title="Group Menu" />
+          <MenuGroup id="group-1">
+            <Box
+              px={300}
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Text.SmallBodyCopy>Detected Language</Text.SmallBodyCopy>
+              <Token closeable={false}>
+                <Icon name="language" />
+                English
+              </Token>
+            </Box>
+          </MenuGroup>
+          <MenuGroup id="group-2" title={title}>
+            <Banner mb={300} text={bannerText} />
+            {menuItemsOne.map(({ id, label }) => (
+              <MenuItem key={id} id={id} inputType="radio">
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};

package/src/MenuGroup/MenuGroup.tsx

@@ -1,7 +1,9 @@
 import React from "react";
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMenuGroupProps } from "./MenuGroupTypes";
 import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
-import { MenuItem } from "../MenuItem";
+import { mapMenuItems } from "../hooks/useMenuChildren";
 
 /**
  * @link https://seeds.sproutsocial.com/components/menu-group/
@@ -23,24 +25,24 @@ import { MenuItem } from "../MenuItem";
  * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
  */
 
-export const MenuGroup = ({
+export const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   titleAs = "h3",
   children: childrenProp,
   title,
   color,
   isSingleSelect,
   id,
-  items,
-  MenuItemComponent = MenuItem,
+  menuItems,
+  MenuItemComponent,
   ...rest
-}: TypeMenuGroupProps) => {
+}: TypeMenuGroupProps<I>) => {
   // Generate a unique ID for the title
   const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
 
   const children =
-    childrenProp || !items || !items.length
+    childrenProp || !menuItems || !menuItems.length
       ? childrenProp
-      : items.map((item) => <MenuItemComponent key={item.id} {...item} />);
+      : mapMenuItems({ menuItems, MenuItemComponent });
 
   if (!children) {
     return null;

package/src/MenuGroup/MenuGroupTypes.ts

@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import type {
   TypeBorderSystemProps,
   TypeColorSystemProps,
@@ -9,7 +8,9 @@ import type {
   TypeSpaceSystemProps,
   TypeTypographySystemProps,
 } from "@sproutsocial/seeds-react-system-props";
-import { MenuItem, type TypeMenuItemProps } from "../MenuItem/index";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeChildrenOrItems } from "../types";
 
 export interface TypeMenuGroupStyledProps
   extends TypeBorderSystemProps,
@@ -21,14 +22,15 @@ export interface TypeMenuGroupStyledProps
     TypeSpaceSystemProps,
     TypeTypographySystemProps {}
 
-export interface TypeMenuGroupProps
+export interface TypeMenuGroupBaseProps
   extends TypeMenuGroupStyledProps,
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
   id: string;
   isSingleSelect?: boolean;
   title?: string;
-  children?: ReactNode;
-  items?: TypeMenuItemProps[];
-  MenuItemComponent?: typeof MenuItem;
   titleAs?: string | React.ComponentType<any>;
 }
+
+export type TypeMenuGroupProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = TypeMenuGroupBaseProps & TypeChildrenOrItems<I>;

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -270,16 +270,16 @@ describe("MenuGroup", () => {
       ])("$name", () => {});
     });
 
-    // To be implemented when items, customMenuItem and menuItemType props are added
-    xdescribe("when the items prop is provided", () => {
-      xit("hides the group if items is empty", () => {});
-      xit("renders items using MenuItem by default", () => {});
-      xit("renders items using customMenuItem when provided", () => {});
+    // To be implemented when menuItems, customMenuItem and menuItemType props are added
+    xdescribe("when the menuItems prop is provided", () => {
+      xit("hides the group if menuItems is empty", () => {});
+      xit("renders menuItems using MenuItem by default", () => {});
+      xit("renders menuItems using customMenuItem when provided", () => {});
       // use a .each to test each item type
       xit("sets MenuItem types when menuItemType provided", () => {});
     });
 
-    xdescribe("when the items prop is not provided", () => {
+    xdescribe("when the menuItems prop is not provided", () => {
       xit("ignores the menuItemType prop", () => {});
       xit("ignores the customMenuItem prop", () => {});
     });

package/src/MenuGroup/__tests__/MenuGroup.typetest.tsx

@@ -10,6 +10,14 @@ export const MenuGroupTypeTest = () => (
       <MenuItem id="1">Test 1</MenuItem>
       <MenuItem id="2">Test 2</MenuItem>
     </MenuGroup>
+    {/* MenuGroup allows menuItems prop */}
+    <MenuGroup id="group" menuItems={[{ id: "1", children: "1" }]} />
+    {/* MenuGroup allows menuItems prop with MenuItemComponent */}
+    <MenuGroup
+      id="group"
+      menuItems={[{ id: "1", children: "1" }]}
+      MenuItemComponent={MenuItem}
+    />
     {/* MenuGroup allows isSingleSelect prop */}
     <MenuGroup id="group-1" isSingleSelect={true}>
       <MenuItem id="1">Test 1</MenuItem>
@@ -34,10 +42,21 @@ export const MenuGroupTypeTest = () => (
     <MenuGroup id="group" border="1px solid black" bg="white" width="150px">
       Test
     </MenuGroup>
-    {/* MenuGroup allows children prop */}
-    <MenuGroup id="group">Test</MenuGroup>
-    {/* MenuGroup allows items prop */}
-    <MenuGroup id="group" items={[{ id: "1", children: "1" }]} />
+
+    {/* @ts-expect-error - MenuGroup requires children or items */}
+    <MenuGroup id="group" />
+    {/* @ts-expect-error - MenuGroup does not allow children and menuItems together */}
+    <MenuGroup id="group" menuItems={[{ id: "1", children: "1" }]}>
+      Test
+    </MenuGroup>
+    {/* @ts-expect-error - MenuGroup does not allow MenuItemComponent without menuItems */}
+    <MenuGroup id="group" MenuItemComponent={MenuItem}>
+      Test
+    </MenuGroup>
+    {/* @ts-expect-error - MenuGroup validates the type of MenuItemComponent */}
+    <MenuGroup id="group" MenuItemComponent={Text}>
+      Test
+    </MenuGroup>
 
     {/* @ts-expect-error - MenuGroup title is invalid as number */}
     <MenuGroup id="group" title={123}>

package/src/MenuGroup/styles.tsx

@@ -9,9 +9,9 @@ import {
   color,
   space,
 } from "styled-system";
-import type { TypeMenuGroupProps } from "./MenuGroupTypes";
+import type { TypeMenuGroupBaseProps } from "./MenuGroupTypes";
 
-export const StyledMenuGroup = styled.li<TypeMenuGroupProps>`
+export const StyledMenuGroup = styled.li<TypeMenuGroupBaseProps>`
   &:not(:last-child) {
     border-bottom: 1px solid
       ${({ theme }) => theme.colors.container.border.base};
@@ -29,9 +29,11 @@ export const StyledMenuGroup = styled.li<TypeMenuGroupProps>`
 `;
 
 export const StyledTitle = styled(Text.SmallSubHeadline)`
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
   margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
     0px ${({ theme }) => theme.space[400]};
 `;
+
 export const StyledMenuGroupUl = styled.ul`
   margin: 0;
   padding: 0;

package/src/MenuHeader/MenuHeader.stories.tsx

@@ -0,0 +1,276 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Banner } from "@sproutsocial/seeds-react-banner";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Input } from "@sproutsocial/seeds-react-input";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Token } from "@sproutsocial/seeds-react-token";
+
+import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
+import {
+  MenuHeader,
+  MenuContent,
+  MenuGroup,
+  SingleSelectMenu,
+  MenuFooter,
+  MenuItem,
+  type TypeMenuHeaderProps,
+} from "../index";
+
+interface MenuHeaderStoryArgs extends TypeMenuHeaderProps {
+  "Trigger Text"?: string;
+  "Header Children"?: string;
+}
+type Story = StoryObj<MenuHeaderStoryArgs>;
+
+const meta: Meta<MenuHeaderStoryArgs> = {
+  title: "Under Development/Primitives/MenuHeader",
+  component: MenuHeader,
+  parameters: {
+    controls: { expanded: true, sort: "requiredFirst" },
+  },
+  argTypes: {
+    "Trigger Text": {
+      table: {
+        category: "Button",
+      },
+      control: "text",
+    },
+    title: {
+      table: {
+        category: "MenuHeader",
+      },
+      description: "Header Title Text",
+      control: "text",
+    },
+    "Header Children": {
+      table: {
+        category: "MenuHeader",
+      },
+      description: "Example children for header",
+      options: ["Input", "Banner", undefined],
+      control: { type: "select" },
+    },
+    rightAction: {
+      table: {
+        category: "MenuHeader",
+      },
+      description: "Optional right header action prop",
+      options: ["button", "link", undefined],
+      control: { type: "select" },
+    },
+    leftAction: {
+      table: {
+        category: "MenuHeader",
+      },
+      description: "Optional left header action prop",
+      options: ["button", undefined],
+      control: { type: "select" },
+    },
+  },
+  args: {
+    "Trigger Text": "Select a Book",
+    title: "Select a Book",
+    leftAction: "button",
+    rightAction: "link",
+    "Header Children": "Banner",
+  },
+};
+
+export default meta;
+
+const handleOnClick = (e: React.MouseEvent, itemName: string) => {
+  action(`${itemName}`)(e);
+};
+
+const StoryActionExamples = ({ type }) => {
+  switch (type) {
+    case "button":
+      return (
+        <Button
+          width="24px"
+          height="24px"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Icon name="arrow-left" />
+        </Button>
+      );
+    case "link":
+      return (
+        <Link mt="space.100" href="#">
+          Help
+        </Link>
+      );
+    default:
+    case undefined:
+      return null;
+  }
+};
+
+const StoryHeaderExamples = (args) => {
+  switch (args.type) {
+    case "Input":
+      return (
+        <Input
+          id="search"
+          name="search"
+          placeholder="Search for a book"
+          type="search"
+        />
+      );
+    case "Banner":
+      return (
+        <Banner
+          display="block"
+          type="opportunity"
+          text="Upgrade and get two free books!"
+        />
+      );
+    default:
+    case undefined:
+      return null;
+  }
+};
+
+export const MenuHeaderSandbox: Story = {
+  name: "Sandbox",
+  render: function MenuWithHeader(args) {
+    return (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={<StorybookMenuToggleButton />}
+        >
+          <MenuHeader
+            alignItems={args.alignItems}
+            leftAction={
+              args.leftAction && <StoryActionExamples type={args.leftAction} />
+            }
+            rightAction={<StoryActionExamples type={args.rightAction} />}
+            title={args.title}
+          />
+          <MenuContent>
+            <MenuGroup id="books">
+              {TEST_BOOKS.map((book) => (
+                <MenuItem
+                  key={book.id}
+                  onClick={(e) => handleOnClick(e, book.title)}
+                  id={book.id}
+                >
+                  {book.title}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+          <MenuFooter>
+            <Link>Manage book settings</Link>
+          </MenuFooter>
+        </SingleSelectMenu>
+      </Box>
+    );
+  },
+};
+
+export const HeadeWithChildren: Story = {
+  name: "Header With Children",
+  render: function HeaderWithChildren(args) {
+    return (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={<StorybookMenuToggleButton />}
+        >
+          <MenuHeader
+            alignItems={args.alignItems}
+            leftAction={
+              args.leftAction && <StoryActionExamples type={args.leftAction} />
+            }
+            rightAction={<StoryActionExamples type={args.rightAction} />}
+            title={args.title}
+          >
+            <StoryHeaderExamples type={args["Header Children"]} />
+          </MenuHeader>
+          <MenuContent>
+            <MenuGroup id="language">
+              <Box
+                px={300}
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                <Text.SmallBodyCopy>Detected Language</Text.SmallBodyCopy>
+                <Token closeable={false}>
+                  <Icon name="language" />
+                  English
+                </Token>
+              </Box>
+            </MenuGroup>
+            <MenuGroup id="books">
+              {TEST_BOOKS.map((book) => (
+                <MenuItem
+                  key={book.id}
+                  onClick={(e) => handleOnClick(e, book.title)}
+                  id={book.id}
+                >
+                  {book.title}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+          <MenuFooter>
+            <Link>Manage book settings</Link>
+          </MenuFooter>
+        </SingleSelectMenu>
+      </Box>
+    );
+  },
+};
+
+export const MenuHeaderLongTitle: Story = {
+  name: "MenuHeader w/ Long Title",
+  args: {
+    title: "This is a really long title that should wrap",
+  },
+  render: function MenuWithHeader(args) {
+    return (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={<StorybookMenuToggleButton />}
+        >
+          <MenuHeader
+            alignItems={args.alignItems}
+            leftAction={
+              args.leftAction && <StoryActionExamples type={args.leftAction} />
+            }
+            rightAction={<StoryActionExamples type={args.rightAction} />}
+            title={args.title}
+          />
+          <MenuContent>
+            <MenuGroup id="books">
+              {TEST_BOOKS.map((book) => (
+                <MenuItem
+                  key={book.id}
+                  onClick={(e) => handleOnClick(e, book.title)}
+                  id={book.id}
+                >
+                  {book.title}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+          <MenuFooter>
+            <Link>Manage book settings</Link>
+          </MenuFooter>
+        </SingleSelectMenu>
+      </Box>
+    );
+  },
+};