@sproutsocial/seeds-react-menu 0.1.0

package/src/MenuItem/__tests__/MenuItem.typetest.tsx

@@ -0,0 +1,41 @@
+import { MenuItem } from "../MenuItem";
+
+export const MenuItemTypeTest = () => (
+  <>
+    {/* Valid MenuItem with minimal required props */}
+    <MenuItem id="test">Test</MenuItem>
+    {/* Valid MenuItem allows disabled prop */}
+    <MenuItem id="test" disabled>
+      Test
+    </MenuItem>
+    {/* Valid MenuItem allows disabled prop false */}
+    <MenuItem id="test" disabled={false}>
+      Test
+    </MenuItem>
+
+    {/* @ts-expect-error - no children is invalid */}
+    <MenuItem id="foo" />
+    {/* @ts-expect-error - test empty states are invalid */}
+    <MenuItem />
+    {/* @ts-expect-error - test missing index is invalid */}
+    <MenuItem id="foo" />
+    {/* @ts-expect-error - test missing id is invalid */}
+    <MenuItem />
+    {/* @ts-expect-error - test that types are invalid */}
+    <MenuItem id={0} />
+    {/* @ts-expect-error -test that wrong highlighted type fails */}
+    <MenuItem $highlighted="string">Hello world!</MenuItem>
+    {/* @ts-expect-error -test that wrong role type fails */}
+    <MenuItem role="wrong">Hello world!</MenuItem>
+    {/* @ts-expect-error - missing id is invalid */}
+    <MenuItem>Test</MenuItem>
+    <MenuItem
+      /* @ts-expect-error - id may not be a number */
+      id={0}
+      /* @ts-expect-error - disabled may not be a string */
+      disabled="true"
+    >
+      Test
+    </MenuItem>
+  </>
+);

package/src/MenuItem/index.ts

@@ -0,0 +1,5 @@
+export * from "./MenuItem";
+
+export * from "./MenuItemTypes";
+
+export * from "./styles";

package/src/MenuItem/styles.tsx

@@ -0,0 +1,71 @@
+import styled, { css } from "styled-components";
+import { focusRing, disabled } from "@sproutsocial/seeds-react-mixins";
+import { color, border, flexbox, grid, layout, space } from "styled-system";
+import {
+  CheckboxContainer,
+  InputWrapper,
+  PillInput,
+  checkboxContainerHoverStyles,
+  inputWrapperHoverStyles,
+  pillInputHoverStyles,
+} from "@sproutsocial/seeds-react-checkbox";
+
+const highlightedStyles = css`
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+`;
+
+export const MenuItemContainer = styled.li<{ $highlighted: boolean }>`
+  border-radius: ${({ theme }) => theme.radii[500]};
+  background-color: ${({ theme }) => theme.colors.listItem.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  padding: ${({ theme }) => theme.space[300]};
+  list-style-type: none;
+  outline: 0;
+  ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration["fast"]};
+
+  /* Highlighted */
+  ${({ $highlighted }) => $highlighted && highlightedStyles}
+
+  /* Hovered, but not focused */
+  &:hover {
+    ${highlightedStyles}
+    ${CheckboxContainer} {
+      ${checkboxContainerHoverStyles}
+    }
+    ${InputWrapper} {
+      ${inputWrapperHoverStyles}
+    }
+    ${PillInput} {
+      ${pillInputHoverStyles}
+    }
+  }
+
+  /* focused */
+  &:focus {
+    ${focusRing}
+  }
+
+  /* Pressed state*/
+  &:active {
+    background-color: ${({ theme }) => theme.colors.listItem.background.active};
+    color: ${({ theme }) => theme.colors.text.inverse};
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    ${disabled}
+  }
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;

package/src/MenuItemSelectable/MenuItemSelectable.feature

@@ -0,0 +1,99 @@
+Feature: MenuItemSelectable
+
+  A selectable item designed to be included within a Menu component, providing different input types
+
+  Rule: User Behavior
+
+    Background:
+      Given an end user is interacting with the component
+
+    Scenario Outline: MenuItemSelectable can be checked
+      Given the MenuItemSelectable is in the unchecked state
+      And the MenuItemSelectable is focused
+      And the MenuItemSelectable is not disabled
+      When the MenuItemSelectable is triggered via <interaction>
+      Then the MenuItemSelectable should be checked
+
+      Examples: Interactions
+        | interaction            |
+        | clicking with mouse    |
+        | pressing the Enter key |
+        | pressing the Space key |
+
+    Scenario Outline: MenuItemSelectable can be unchecked
+      Given the MenuItemSelectable is in the checked state
+      And the MenuItemSelectable is focused
+      And the MenuItemSelectable is not disabled
+      When the MenuItemSelectable is triggered via <interaction>
+      Then the MenuItemSelectable should be unchecked
+
+      Examples: Interactions
+        | interaction            |
+        | clicking with mouse    |
+        | pressing the Enter key |
+        | pressing the Space key |
+
+    Scenario Outline: MenuItemSelectable is disabled
+      Given the MenuItemSelectable is disabled
+      And the MenuItemSelectable is focused
+      When the MenuItemSelectable is triggered via <interaction>
+      Then no events should fire
+
+      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
+
+    Scenario: MenuItemSelectable accepts children
+      When <child component(s)> are provided
+      Then the MenuItemSelectable should render the <component(s)>
+
+      Examples: child components
+        | child component(s)   | component(s)  |
+        | a Link is            | Link          |
+        | a Text is            | Text          |
+        | a Icon is            | Icon          |
+        | a Text then Icon are | Text and Icon |
+        | a Icon and Text are  | Icon and Text |
+
+    Scenario Outline: MenuItemSelectable supports different input types
+      When an <inputTypeProp> is passed to the MenuItemSelectable component
+      Then the MenuItemSelectable renders with the appropriate <component> type
+
+      Examples: Input Types
+        | inputTypeProp | component |
+        | checkbox      | Checkbox  |
+        | radio         | Radio     |
+        | switch        | Switch    |
+
+    Scenario: MenuItemSelectable defaults to an icon input type
+      When the MenuItemSelectable is implemented without an inputType prop specified
+      Then the MenuItemSelectable defaults to an icon input type
+
+    Scenario: MenuItemSelectable checked state can be enabled via a prop
+      When the selected prop is set to true
+      Then the MenuItemSelectable should appear in the checked state
+
+    Scenario Outline: MenuItemSelectable validates prop types
+      When any <propName> is passed to the MenuItemSelectable
+      Then the MenuItemSelectable should check that each <propName> is of the expected <propType>
+
+      Examples: Prop Types
+        | 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 |
+
+    Scenario: MenuItemSelectable extends MenuItem
+      When MenuItemSelectable features are used
+      Then the MenuItemSelectable responds as a MenuItem would

package/src/MenuItemSelectable/MenuItemSelectable.tsx

@@ -0,0 +1,136 @@
+import React, { useContext, useMemo } from "react";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+import { Radio } from "@sproutsocial/seeds-react-radio";
+import { useTheme } from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { MenuContext } from "../MenuContext";
+import { MenuItem } from "../MenuItem";
+
+// import { type TypeMenuItemRoles } from "../constants";
+import {
+  MenuItemSelectableAction,
+  MenuItemSelectableRow,
+  MenuItemSelectableText,
+} from "./styles";
+import type {
+  TypeMenuItemSelectableProps,
+  InputType,
+} from "./MenuItemSelectableTypes";
+
+/**
+ * SelectionIndicator - handles logic for appropriate rendering of inputs
+ * @returns Checkbox | Icon | Radio | Switch
+ */
+export const SelectionIndicator = ({
+  id,
+  inputType = "icon",
+  "aria-labelledby": labeledBy,
+  selected,
+}: {
+  id: string;
+  "aria-labelledby": string;
+  selected: boolean;
+  inputType: InputType;
+}) => {
+  const { space } = useTheme();
+
+  const inputStub = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+  };
+
+  switch (inputType) {
+    case "checkbox":
+      return (
+        <Checkbox
+          onChange={() => {}}
+          checked={selected}
+          aria-labelledby={labeledBy}
+          id={`MenuItemSelectable-${inputType}-${id}`}
+        />
+      );
+    case "switch":
+      return (
+        <Switch
+          onClick={inputStub}
+          checked={!!selected}
+          aria-labelledby={labeledBy}
+          id={`MenuItemSelectable-${inputType}-${id}`}
+        />
+      );
+    case "radio":
+      return (
+        <Radio
+          checked={selected}
+          id={`MenuItemSelectable-${inputType}-${id}`}
+          name={`MenuItemSelectable-${inputType}`}
+          aria-labelledby={labeledBy}
+        />
+      );
+    case "icon":
+      if (selected) {
+        return <Icon name="check-solid" aria-hidden size="small" />;
+      } else {
+        return <Box width={space["400"]}></Box>;
+      }
+    default:
+      return null;
+  }
+};
+
+/**
+ * MenuItemSelectable - primitive with controlled input states
+ */
+export const MenuItemSelectable = ({
+  id,
+  children,
+  inputType = "icon",
+  inputLabel,
+  ...props
+}: TypeMenuItemSelectableProps) => {
+  const { selectedItem, selectedItems, isListbox } = useContext(MenuContext);
+  const selected = useMemo(
+    () =>
+      selectedItem?.id === id ||
+      !!selectedItems?.find((item) => item?.id === id),
+    [selectedItem, selectedItems]
+  );
+
+  if (isListbox === false) {
+    console.warn(
+      "MenuItemSelectable is invalid when isListbox is false (Menu)"
+    );
+  }
+
+  // const roles: Record<InputType, TypeMenuItemRoles> = {
+  //   checkbox: "menuitemcheckbox",
+  //   switch: "menuitemcheckbox",
+  //   radio: "menuitemradio",
+  //   icon: "option",
+  // };
+
+  const label = inputLabel || `menu-item-child-${id}`;
+
+  return (
+    <MenuItem
+      active={selected}
+      id={id}
+      // role={roles["icon"]}
+      aria-selected={selected}
+      {...props}
+    >
+      <MenuItemSelectableRow>
+        <MenuItemSelectableAction>
+          <SelectionIndicator
+            id={id}
+            aria-labelledby={label}
+            inputType={inputType}
+            selected={!!selected}
+          />
+        </MenuItemSelectableAction>
+        <MenuItemSelectableText id={label}>{children}</MenuItemSelectableText>
+      </MenuItemSelectableRow>
+    </MenuItem>
+  );
+};

package/src/MenuItemSelectable/MenuItemSelectableTypes.ts

@@ -0,0 +1,15 @@
+import type { TypeMenuItemProps } from "../MenuItem";
+
+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 TypeMenuItemSelectableProps extends TypeMenuItemProps {
+  active?: boolean;
+  inputType?: InputType;
+  inputLabel?: string;
+}

package/src/MenuItemSelectable/__tests__/MenuItemSelectable.test.tsx

@@ -0,0 +1,303 @@
+/* eslint-disable testing-library/no-unnecessary-act */
+import React from "react";
+import { render, screen, act } from "@sproutsocial/seeds-react-testing-library";
+import { PointerEventsCheckLevel } from "@testing-library/user-event";
+import { type UserEvent } from "@testing-library/user-event";
+import {
+  MenuContent,
+  MenuToggleButton,
+  MenuItemSelectable,
+  MultiSelectMenu,
+  INPUT_TYPES,
+} from "../../index";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { TestWithMenuRoot, TestWithMockedMenu } from "../../menuTestingUtils";
+
+const books = [
+  {
+    index: 0,
+    id: "book-1",
+    author: "Harper Lee",
+    title: "To Kill a Mockingbird",
+  },
+  { index: 1, id: "book-2", author: "Lev Tolstoy", title: "War and Peace" },
+];
+
+const testByType = {
+  [INPUT_TYPES.CHECKBOX]: {
+    isSelected: () => {
+      expect(
+        screen.getByRole("checkbox", { checked: true })
+      ).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByRole("checkbox", { checked: true })
+      ).not.toBeInTheDocument();
+    },
+  },
+  [INPUT_TYPES.RADIO]: {
+    isSelected: () => {
+      expect(screen.getByRole("radio", { checked: true })).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByRole("radio", { checked: true })
+      ).not.toBeInTheDocument();
+    },
+  },
+  [INPUT_TYPES.SWITCH]: {
+    isSelected: () => {
+      expect(screen.getByRole("switch", { checked: true })).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByRole("switch", { checked: true })
+      ).not.toBeInTheDocument();
+    },
+  },
+  [INPUT_TYPES.ICON]: {
+    isSelected: () => {
+      expect(
+        screen.getByDataQaLabel({ icon: "check-solid" })
+      ).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByDataQaLabel({ icon: "check-solid" })
+      ).not.toBeInTheDocument();
+    },
+  },
+};
+
+describe("MenuItemSelectable ", () => {
+  describe("User Behavior", () => {
+    xdescribe.each([
+      INPUT_TYPES.CHECKBOX,
+      INPUT_TYPES.RADIO,
+      INPUT_TYPES.SWITCH,
+      INPUT_TYPES.ICON,
+    ])("when the input type is %s", (inputType) => {
+      test.each([
+        {
+          action: "clicking with mouse",
+          activate: async (user: UserEvent) => {
+            const firstItem = screen.getByRole("option", {
+              name: books[0].title,
+            });
+            await user
+              .setup({
+                pointerEventsCheck: PointerEventsCheckLevel.Never,
+              })
+              .click(firstItem);
+          },
+          deactivate: async (user: UserEvent) => {
+            const firstItem = screen.getByRole("option", {
+              name: books[0].title,
+            });
+            await user
+              .setup({
+                pointerEventsCheck: PointerEventsCheckLevel.Never,
+              })
+              .click(firstItem);
+          },
+        },
+        {
+          action: "pressing the Enter key",
+          activate: async (user: UserEvent) => {
+            await user.keyboard("{arrowdown}{enter}");
+          },
+          deactivate: async (user: UserEvent) => {
+            await user.keyboard("{enter}");
+          },
+        },
+        {
+          action: "pressing the Space key",
+          activate: async (user: UserEvent) => {
+            await user.keyboard("{arrowdown}{space}");
+          },
+          deactivate: async (user: UserEvent) => {
+            await user.keyboard("{space}");
+          },
+        },
+      ])(
+        "can be checked and unchecked when $action",
+        async ({ activate, deactivate }) => {
+          const { user } = render(
+            <MultiSelectMenu
+              triggerElement={<MenuToggleButton>Open</MenuToggleButton>}
+              defaultIsOpen
+            >
+              <MenuContent>
+                {books.map((book) => {
+                  return (
+                    <MenuItemSelectable
+                      key={book.id}
+                      id={book.id}
+                      inputType={inputType}
+                    >
+                      {book.title}
+                    </MenuItemSelectable>
+                  );
+                })}
+              </MenuContent>
+            </MultiSelectMenu>
+          );
+
+          // check that menu is visible
+          expect(
+            screen.getByRole("option", { name: books[0].title })
+          ).toBeInTheDocument();
+
+          // Check that checkboxes are rendered
+          if (inputType !== INPUT_TYPES.ICON)
+            expect(screen.getAllByRole(inputType)).toHaveLength(books.length);
+
+          // Perform the action to select the item
+          await activate(user);
+
+          expect(
+            await screen.findByRole("option", { selected: true })
+          ).toBeInTheDocument();
+
+          testByType[inputType].isSelected();
+
+          // Perform the action to deselect the item
+          deactivate(user);
+
+          expect(
+            await screen.findByRole("option", {
+              name: books[0].title,
+              selected: false,
+            })
+          ).toBeInTheDocument();
+
+          testByType[inputType].isNotSelected();
+        }
+      );
+    });
+  });
+
+  describe("API", () => {
+    it("accepts children", () => {
+      render(
+        <MenuItemSelectable id="test-menu-item-selectable">
+          Hello world!
+          <Button>Hello menu item!</Button>
+        </MenuItemSelectable>
+      );
+
+      const menuItemSelectable = screen.getByText("Hello world!");
+      const button = screen.getByText("Hello menu item!");
+      expect(menuItemSelectable).toContainElement(button);
+    });
+
+    test.each([INPUT_TYPES.CHECKBOX, INPUT_TYPES.RADIO, INPUT_TYPES.SWITCH])(
+      "supports %s input types",
+      (inputType) => {
+        render(
+          <MenuItemSelectable
+            id="test-menu-item-selectable"
+            inputType={inputType}
+          >
+            Hello world!
+          </MenuItemSelectable>
+        );
+
+        expect(screen.getByRole(inputType)).toBeInTheDocument();
+      }
+    );
+
+    it("uses the check icon by default when no inputType provided", () => {
+      const testItem = books[0];
+      render(
+        <TestWithMockedMenu context={{ items: books, selectedItem: testItem }}>
+          <MenuItemSelectable id={testItem.id}>
+            {testItem.title}
+          </MenuItemSelectable>
+        </TestWithMockedMenu>
+      );
+
+      expect(
+        screen.getByDataQaLabel({ icon: "check-solid" })
+      ).toBeInTheDocument();
+    });
+
+    describe.each([
+      INPUT_TYPES.CHECKBOX,
+      INPUT_TYPES.RADIO,
+      INPUT_TYPES.SWITCH,
+      INPUT_TYPES.ICON,
+    ])("when the input type is %s", (inputType) => {
+      it("enables it's checked state when selected in the context", () => {
+        const testItem = books[0];
+        render(
+          <TestWithMockedMenu
+            context={{ items: books, selectedItem: testItem }}
+          >
+            <MenuItemSelectable id={testItem.id} inputType={inputType}>
+              {testItem.title}
+            </MenuItemSelectable>
+          </TestWithMockedMenu>
+        );
+
+        screen.getByRole("option", { selected: true });
+        testByType[inputType].isSelected();
+      });
+
+      it("enables it's checked state when selected by default", () => {
+        const testItem = books[0];
+        render(
+          <TestWithMenuRoot
+            triggerElement={<MenuToggleButton>Open</MenuToggleButton>}
+            {...{
+              isOpen: true,
+              items: books,
+              selectedItem: testItem,
+            }}
+          >
+            <MenuItemSelectable id={testItem.id} inputType={inputType}>
+              {testItem.title}
+            </MenuItemSelectable>
+          </TestWithMenuRoot>
+        );
+
+        screen.getByRole("option", { selected: true });
+        testByType[inputType].isSelected();
+      });
+
+      it("allows its checked state to be deselected when using the context", async () => {
+        const testItem = books[0];
+        const TestItemWithState = () => {
+          const [selectedItem, setSelectedItem] = React.useState<
+            typeof testItem | undefined
+          >(testItem);
+          return (
+            <TestWithMockedMenu context={{ items: books, selectedItem }}>
+              <MenuItemSelectable
+                id={testItem.id}
+                inputType={inputType}
+                onClick={() => setSelectedItem(undefined)}
+              >
+                {testItem.title}
+              </MenuItemSelectable>
+            </TestWithMockedMenu>
+          );
+        };
+        const { user } = render(<TestItemWithState />);
+
+        const menuItem = screen.getByRole("option", { selected: true });
+        testByType[inputType].isSelected();
+
+        await user.click(menuItem);
+
+        expect(
+          await screen.findByRole("option", {
+            selected: false,
+          })
+        ).toBeInTheDocument();
+        testByType[inputType].isNotSelected();
+      });
+    });
+  });
+});