@sproutsocial/seeds-react-menu 0.1.0 → 0.2.1

package/src/MenuGroup/MenuGroup.feature

@@ -6,30 +6,20 @@ Feature: Menu Group
     Background:
       Given an end user is using the component
 
-    Scenario: MenuGroup is accessible to screen readers when menu opened
-      Given a screen reader is being used
-      When a menu is opened
-      And the first group receives focus
-      Then the first group is announced by the screen reader
-
-    Scenario: MenuGroup is accessible to screen readers when there are 2 groups
-      Given a screen reader is being used
-      When a navigating between two groups
-      Then the new group is announced by the screen reader
-
-    Scenario Outline: MenuGroup uses select type
-      When the MenuGroup has <group type>
-      And MenuContext is set to <menu type>
-      Then <selection behavior>
-
-      Examples:
-        | group type | menu type | selection behavior                                  |
-        | single     | single    | the menu uses the default behavior                  |
-        | multiple   | multiple  | the menu uses the default behavior                  |
-        | single     | multiple  | the group behaves like a single select              |
-        | multiple   | single    | the group throws an error and uses default behavior |
-        | default    | single    | the menu uses the default behavior                  |
-        | default    | multiple  | the menu uses the default behavior                  |
+    Scenario: MenuGroup has isSingleSelect true
+      When the MenuGroup isSingleSelect is true
+      And MenuContext is set to multiple selection
+      Then the group behaves like a single select
+
+    Scenario: MenuGroup has isSingleSelect undefined
+      When the MenuGroup isSingleSelect is undefined
+      And MenuContext is set to multiple selection
+      Then the group behaves like a multi select
+
+    Scenario: MenuGroup has isSingleSelect false
+      When the MenuGroup isSingleSelect is false
+      And MenuContext is set to multiple selection
+      Then the group behaves like a multi select
 
   Rule: API
     Background:
@@ -98,8 +88,6 @@ Feature: Menu Group
           | a red Banner   | top            | a red Banner at the top of the group    |
           | hint text      | bottom         | hint text at the bottom of the group    |
           | text           | top and bottom | text at the top and bottom of the group |
-          | no content     | top            | no content at the top of the group      |
-          | no content     | bottom         | no content at the bottom of the group   |
 
       Scenario Outline: MenuRoot checks its types
         When <propName> is passed a value

package/src/MenuGroup/MenuGroup.tsx

@@ -2,6 +2,26 @@ import React from "react";
 import type { TypeMenuGroupProps } from "./MenuGroupTypes";
 import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
 
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-group/
+ *
+ * @description MenuGroup is used to group lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
+ *
+ * @example
+ * <ActionMenu>
+ *   <MenuContent>
+ *     <MenuGroup title="Group 1">
+ *       <MenuItem>Item 1</MenuItem>
+ *     </MenuGroup>
+ *     <MenuGroup title="Group 1">
+ *       <MenuItem>Item 2</MenuItem>
+ *     </MenuGroup>
+ *   </MenuContent>
+ * </ActionMenu>
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
+ */
+
 export const MenuGroup = ({
   titleAs = "h3",
   children,
@@ -23,7 +43,7 @@ export const MenuGroup = ({
       {...rest}
     >
       {title && (
-        <StyledTitle as={titleAs} id={titleId}>
+        <StyledTitle role="heading" as={titleAs} id={titleId}>
           {title}
         </StyledTitle>
       )}

package/src/MenuGroup/MenuGroupTypes.ts

@@ -25,5 +25,6 @@ export interface TypeMenuGroupProps
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
   title?: string;
   children: ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   titleAs?: string | React.ComponentType<any>;
 }

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

@@ -15,8 +15,10 @@ const menuItems = [
 
 describe("MenuGroup", () => {
   xdescribe("User Behavior", () => {
-    xit("The first group should be accessible to screen readers", () => {});
-    xit("User is able to navigate between groups", () => {});
+    // To be enabled when isSingleSelect prop added
+    xit("behaves as it normally would when isSingleSelect is undefined", () => {});
+    xit("behaves as it normally would when isSingleSelect is false", () => {});
+    xit("behaves like a single select when isSingleSelect is true", () => {});
   });
   describe("API", () => {
     it("renders a group with a title", () => {
@@ -24,7 +26,7 @@ describe("MenuGroup", () => {
       render(
         <SingleSelectMenu
           defaultIsOpen
-          triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
         >
           <MenuContent>
             <MenuGroup title={menuTitle}>
@@ -41,13 +43,17 @@ describe("MenuGroup", () => {
       // Find associated label for the group. (Menu Group uses aria-labelledby to point to heading element)
       const menuGroup = screen.getByRole("group", { name: menuTitle });
       expect(menuGroup).toBeInTheDocument();
+      expect(
+        // eslint-disable-next-line testing-library/prefer-presence-queries
+        screen.queryByRole("heading", { name: menuTitle })
+      ).toBeInTheDocument();
     });
 
     it("when no title is provided, it should not render a title", () => {
       render(
         <SingleSelectMenu
           defaultIsOpen
-          triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
         >
           <MenuContent>
             <MenuGroup>
@@ -66,11 +72,11 @@ describe("MenuGroup", () => {
       expect(menuTitle).not.toBeInTheDocument();
     });
 
-    it("Renders children correctly", () => {
+    it("renders MenuItem children correctly", () => {
       render(
         <SingleSelectMenu
           defaultIsOpen
-          triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
         >
           <MenuContent>
             <MenuGroup>
@@ -91,5 +97,34 @@ describe("MenuGroup", () => {
         screen.getByRole("option", { name: menuItems[1].label })
       ).toBeInTheDocument();
     });
+
+    // How do we do this accessibly in a UL?
+    xdescribe("renders custom content", () => {
+      test.each([
+        {
+          name: "a red Banner at the top of the group",
+        },
+        {
+          name: "hint text at the bottom of the group",
+        },
+        {
+          name: "text at the top and bottom of the group",
+        },
+      ])("$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", () => {});
+      // use a .each to test each item type
+      xit("sets MenuItem types when menuItemType provided", () => {});
+    });
+
+    xdescribe("when the items prop is not provided", () => {
+      xit("ignores the menuItemType prop", () => {});
+      xit("ignores the customMenuItem prop", () => {});
+    });
   });
 });

package/src/MenuGroup/styles.tsx

@@ -18,6 +18,7 @@ export const StyledMenuGroup = styled.li<TypeMenuGroupProps>`
   }
   list-style: none;
   margin: 0;
+
   ${border}
   ${position}
   ${color}
@@ -28,10 +29,10 @@ export const StyledMenuGroup = styled.li<TypeMenuGroupProps>`
 `;
 
 export const StyledTitle = styled(Text.SmallSubHeadline)`
-  margin: ${({ theme }) => theme.space[200]} 0px
-    ${({ theme }) => theme.space[300]} ${({ theme }) => theme.space[300]};
+  margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
+    0px ${({ theme }) => theme.space[400]};
 `;
 export const StyledMenuGroupUl = styled.ul`
   margin: 0;
-  padding: ${({ theme }) => theme.space[300]};
+  padding: 0;
 `;

package/src/MenuHeader/MenuHeader.tsx

@@ -3,9 +3,18 @@ import {
   MenuHeaderContainer,
   MenuTitleText,
   MenuChildrenContainer,
+  MenuHeaderFeatures,
 } from "./styles";
 import type { TypeMenuHeaderProps } from "./MenuHeaderTypes";
 
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-header/
+ *
+ * @description MenuHeader is a container used to hold header content within a Menu.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-footer/ | MenuFooter}
+ */
+
 const MenuHeader = ({
   children,
   title,
@@ -16,11 +25,13 @@ const MenuHeader = ({
   return (
     <>
       <MenuHeaderContainer $leftAction={!!leftAction} {...rest}>
-        {leftAction && leftAction}
-        {title && (
-          <MenuTitleText $leftAction={!!leftAction}>{title}</MenuTitleText>
-        )}
-        {rightAction && rightAction}
+        <MenuHeaderFeatures $leftAction={!!leftAction}>
+          {leftAction && leftAction}
+          {title && (
+            <MenuTitleText $leftAction={!!leftAction}>{title}</MenuTitleText>
+          )}
+          {rightAction && rightAction}
+        </MenuHeaderFeatures>
         {children && <MenuChildrenContainer>{children}</MenuChildrenContainer>}
       </MenuHeaderContainer>
     </>

package/src/MenuHeader/__tests__/MenuHeader.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { MenuHeader } from "../MenuHeader";
+import { MenuRoot } from "../../MenuRoot";
 import Button from "@sproutsocial/seeds-react-button";
+import Text from "@sproutsocial/seeds-react-text";
 
 describe("MenuHeader API", () => {
   it("renders a title when title prop is passed a string", () => {
@@ -15,12 +17,54 @@ describe("MenuHeader API", () => {
 
     expect(menuHeader).not.toBeInTheDocument();
   });
-
-  it("supports children", () => {
-    render(<MenuHeader>Hello World</MenuHeader>);
-
-    expect(screen.getByText("Hello World")).toBeInTheDocument();
-  });
+  const contextTests = [
+    {
+      children: "Text",
+      TestComponent: <Text>Find me!</Text>,
+      test: () => {
+        expect(screen.getByText("Hello world!")).toContainElement(
+          screen.getByText("Find me!")
+        );
+      },
+    },
+    // Implement when components are available
+    // { children: "Banner" },
+    // { children: "MenuHeaderInput" },
+    // { children: "Text and a Banner" },
+  ];
+
+  it.each(contextTests)(
+    "$children rendered when $children provided",
+    ({ TestComponent, test }) => {
+      render(
+        <MenuHeader>
+          Hello world!
+          {TestComponent}
+        </MenuHeader>
+      );
+
+      test();
+    }
+  );
+
+  it.each(contextTests)(
+    "$children rendered when $children provided in MenuRoot",
+    ({ TestComponent, test }) => {
+      render(
+        <MenuRoot
+          isOpen
+          menuToggleElement={<Button onClick={jest.fn()}>Open</Button>}
+        >
+          <MenuHeader>
+            Hello world!
+            {TestComponent}
+          </MenuHeader>
+        </MenuRoot>
+      );
+
+      test();
+    }
+  );
 
   it("supports clickable actions", async () => {
     const handleTestClick = jest.fn();

package/src/MenuHeader/__tests__/MenuHeader.typetest.tsx

@@ -6,6 +6,7 @@ export const MenuHeaderTypeTest = () => (
       title="Menu Header"
       leftAction={<div>left action</div>}
       rightAction={<div>right action</div>}
+      // eslint-disable-next-line react/no-children-prop
       children={<div>children</div>}
     />
     {/* left and right action accept strings */}

package/src/MenuHeader/styles.tsx

@@ -22,28 +22,9 @@ export const MenuHeaderContainer = styled.div<TypeMenuHeaderContainerProps>`
   width: 100%;
   font-size: ${({ theme }) => theme.typography[200].fontSize};
   display: flex;
+  flex-direction: column;
   padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
 
-  > a {
-    white-space: nowrap;
-  }
-
-  &:first-child {
-    flex-grow: 1;
-    justify-self: start;
-  }
-
-  &:last-child {
-    flex-grow: 1;
-    justify-self: end;
-  }
-
-  ${({ $leftAction, theme }) =>
-    $leftAction &&
-    `
-			padding-left: ${theme.space[350]};
-	`}
-
   ${border}
   ${color}
   ${flexbox}
@@ -60,16 +41,34 @@ export const MenuTitleText = styled.h3<TypeMenuHeaderContainerProps>`
   flex-grow: 2;
   justify-self: start;
 
+  ${({ theme }) => theme.typography[200]}
+
   ${({ $leftAction, theme }) =>
     $leftAction &&
     `
 			padding-left: ${theme.space[350]};
 	`}
-
-  ${({ theme }) => theme.typography[200]}
 `;
 
 export const MenuChildrenContainer = styled.div`
   grid-column: 1 / -1;
   margin-top: ${({ theme }) => theme.space[300]};
 `;
+
+export const MenuHeaderFeatures = styled.div<TypeMenuHeaderContainerProps>`
+  display: flex;
+
+  > a {
+    white-space: nowrap;
+  }
+
+  &:first-child {
+    flex-grow: 1;
+    justify-self: start;
+  }
+
+  &:last-child {
+    flex-grow: 1;
+    justify-self: end;
+  }
+`;

package/src/MenuItem/MenuItem.feature

@@ -1,6 +1,6 @@
 Feature: MenuItem
 
-  A configurable and interactive item for inclusion in a `Menu` component.
+  A configurable and interactive item for inclusion in a `Menu` component, with various input types if used in a listbox.
 
   Rule: User Behavior
     Background:
@@ -11,6 +11,17 @@ Feature: MenuItem
       When the MenuItem is clicked
       Then the MenuItem's onClick event should fire
 
+    Scenario Outline: MenuItem can be triggered via keyboard
+      Given a MenuItem is focused
+      And the MenuItem is not disabled
+      When the MenuItem is triggered via <interaction>
+      Then the MenuItem's onClick event should fire
+
+      Examples:
+        | interaction            |
+        | pressing the Enter key |
+        | pressing the Space key |
+
     Scenario Outline: MenuItem is disabled
       Given a MenuItem is disabled
       When the MenuItem is triggered via <interaction>
@@ -21,18 +32,35 @@ Feature: MenuItem
         | clicking                            |
         | focusing and pressing the Enter key |
         | focusing and pressing the Space key |
+      
+    Scenario Outline: MenuItem can be checked
+      Given the MenuItem is in a Listbox
+      And the MenuItem is in the unchecked state
+      And the MenuItem is focused
+      And the MenuItem is not disabled
+      When the MenuItem is triggered via <interaction>
+      Then the MenuItem should be checked
 
-    Scenario Outline: MenuItem can be triggered via keyboard
-      Given a MenuItem is focused
+      Examples: Interactions
+        | interaction            |
+        | clicking with mouse    |
+        | pressing the Enter key |
+        | pressing the Space key |
+
+    Scenario Outline: MenuItem can be unchecked
+      Given the MenuItem is in a Listbox
+      And the MenuItem is in the checked state
+      And the MenuItem is focused
       And the MenuItem is not disabled
       When the MenuItem is triggered via <interaction>
-      Then the MenuItem's onClick event should fire
+      Then the MenuItem should be unchecked
 
-      Examples:
+      Examples: Interactions
         | interaction            |
+        | clicking with mouse    |
         | pressing the Enter key |
         | pressing the Space key |
-      
+
   Rule: API
     Background:
       Given an engineer is developing using the component
@@ -63,26 +91,38 @@ Feature: MenuItem
         | grid                 | gridGap        |
         | space                | p              |
 
+    Scenario Outline: MenuItem supports different input types
+      Given the MenuItem is in a Listbox
+      When the inputType is <inputTypeProp> on the MenuItem component
+      Then the MenuItem renders with the appropriate <component> type
+
+      Examples: Input Types
+        | inputTypeProp | component |
+        | checkbox      | Checkbox  |
+        | radio         | Radio     |
+        | switch        | Switch    |
+
+    Scenario: MenuItem defaults to an icon input type
+      Given the MenuItem is in a Listbox
+      When the MenuItem is implemented without an inputType prop specified
+      Then the MenuItem defaults to an icon input type
+
+    Scenario: MenuItem checked state can be enabled via a prop
+      Given the MenuItem is in a Listbox
+      When the selected prop is set to true
+      Then the MenuItem should appear in the checked state
+
     Scenario Outline: MenuItem validates prop types
-      When any <prop> is passed to the MenuItem
-      Then the MenuItem should check that each prop is of the expected <propType>
+      When any <propName> is passed to the MenuItem
+      Then the MenuItem should check that each <propName> is of the expected <propType>
 
       Examples: Prop Types
-        | prop       | propType |
-        | children   | node     |
-        | onClick    | func     |
-        | disabled   | bool     |
-        | className  | string   |
-
-    Scenario Outline: Screen readers should read MenuItem states
-      Given a MenuItem is <state>
-      Then screen readers should read the MenuItem as <state>
-
-      Examples: MenuItem States
-        | state    |
-        | enabled  |
-        | disabled |
-        | hovered  |
-        | focused  |
-        | active   |
-        | pressed  |
+        | propName  | propType                   |
+        | children  | ReactNode                  |
+        | disabled  | boolean                    |
+        | elevation | low, medium, or high       |
+        | href      | string                     |
+        | onClick   | React.MouseEventHandler    |
+        | role      | string                     |
+        | selected  | boolean                    |
+        | inputType | checkbox, radio, or switch |

package/src/MenuItem/MenuItem.tsx

@@ -1,44 +1,63 @@
 import React, { useContext } from "react";
 import { MenuContext } from "../MenuContext";
-import { MENU_ITEM_ROLES } from "../constants";
 import type { TypeDefaultItemProps } from "../types";
-import { MenuItemContainer } from "./styles";
 import type { TypeMenuItemProps } from "./MenuItemTypes";
+import { MenuItemContainer, StyledMenuItem } from "./styles";
+import { useOptionProps } from "./useOptionProps";
+
+// TODO: decide if we want to support inputs on menuitems
+// const roles = {
+//   checkbox: "menuitemcheckbox",
+//   switch: "menuitemcheckbox",
+//   radio: "menuitemradio",
+// } as const;
 
 export const MenuItem = ({
   id,
   children,
-  role = "menuitem",
-  label,
   onClick,
   onKeyDown,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   disabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ref,
+  href,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color,
   ...props
 }: TypeMenuItemProps) => {
   const { getItemProps, itemsMap, highlightedIndex, isListbox } =
     useContext(MenuContext);
+  const { ...optionProps } = useOptionProps({
+    id,
+    children,
+    ...props,
+  });
   const item = (itemsMap[id] || { index: 0, id }) as TypeDefaultItemProps;
   const highlighted = highlightedIndex === item?.index;
 
   return (
-    <MenuItemContainer
-      id={id}
-      tabIndex={role !== MENU_ITEM_ROLES.LISTITEM && !disabled ? -1 : undefined}
-      $highlighted={highlighted}
-      {...getItemProps?.({
-        ...(isListbox ? {} : { role: "menuitem" }),
-        item,
-        index: item.index,
-        // This prop no longer supported in downshift
-        // disabled,
-        onClick,
-        onKeyDown,
-      })}
-      {...props}
-    >
-      {children}
+    <MenuItemContainer role="none">
+      <StyledMenuItem
+        id={id}
+        $highlighted={highlighted}
+        {...getItemProps?.({
+          ...(isListbox ? {} : { role: "menuitem" }),
+          item,
+          index: item.index,
+          // This prop no longer supported in downshift
+          // disabled,
+          onClick,
+          onKeyDown,
+        })}
+        // use anchor tag if href is provided and button for menuitem
+        as={isListbox ? undefined : href ? "a" : "button"}
+        href={href}
+        // eslint-disable-next-line react/no-children-prop
+        children={children}
+        {...optionProps}
+        {...props}
+      />
     </MenuItemContainer>
   );
 };

package/src/MenuItem/MenuItemTypes.ts

@@ -22,6 +22,14 @@ export interface TypeMenuItemStyledProps
     TypeSpaceSystemProps,
     TypeTypographySystemProps {}
 
+export const INPUT_TYPES = {
+  CHECKBOX: "checkbox",
+  RADIO: "radio",
+  SWITCH: "switch",
+  ICON: "icon",
+} as const;
+export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
+
 export interface TypeMenuItemProps
   extends TypeMenuItemStyledProps,
     Omit<
@@ -29,9 +37,13 @@ export interface TypeMenuItemProps
       "as" | "item" | keyof TypeMenuItemStyledProps | keyof TypeDefaultItemProps
     >,
     Omit<TypeDefaultItemProps, "index"> {
-  label?: string;
   children: React.ReactNode;
   disabled?: boolean;
   role?: TypeMenuItemRoles;
   $highlighted?: boolean;
+
+  // props for options
+  active?: boolean;
+  inputType?: InputType;
+  inputLabelId?: string;
 }