Create menu item component

For the epic element-hq/compound#226.

src/components/MenuItem/MenuItem.module.css

@@ -0,0 +1,101 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.item {
+  display: flex;
+  align-items: center;
+  padding-block: var(--cpd-space-2x);
+  padding-inline: var(--cpd-space-4x);
+  inline-size: 100%;
+  color: var(--cpd-color-text-secondary);
+  background: var(--cpd-color-bg-action-secondary-rest);
+}
+
+.item.interactive {
+  cursor: pointer;
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.label {
+  padding-inline: var(--cpd-space-3x);
+  flex-basis: 100%;
+  text-align: start;
+}
+
+.nav-hint {
+  display: none;
+  flex-shrink: 0;
+  margin-inline-end: calc(-1 * var(--cpd-space-2x));
+}
+
+button.item {
+  appearance: none;
+  border: none;
+}
+
+.item.with-chevron {
+  padding-inline-end: var(--cpd-space-2x);
+}
+
+.item[data-kind="primary"] > .label {
+  color: var(--cpd-color-text-primary);
+}
+
+.item[data-kind="primary"] > .icon {
+  color: var(--cpd-color-icon-primary);
+}
+
+.item[data-kind="primary"] > .nav-hint {
+  color: var(--cpd-color-icon-tertiary);
+}
+
+.item[data-kind="critical"] > .label {
+  color: var(--cpd-color-text-critical-primary);
+}
+
+.item[data-kind="critical"] > .icon,
+.item[data-kind="critical"] > .nav-hint {
+  color: var(--cpd-color-icon-critical-primary);
+}
+
+@media (hover) {
+  .item.interactive[data-kind="primary"]:hover {
+    background: var(--cpd-color-bg-action-secondary-hovered);
+  }
+
+  .item.interactive[data-kind="critical"]:hover {
+    background: var(--cpd-color-bg-critical-subtle);
+  }
+
+  .item.interactive:hover > .nav-hint {
+    display: initial;
+  }
+
+  .item.interactive:hover > .nav-hint ~ * {
+    display: none;
+  }
+}
+
+.item.interactive[data-kind="primary"]:active {
+  background: var(--cpd-color-bg-action-secondary-pressed);
+}
+
+.item.interactive[data-kind="critical"]:active {
+  background: var(--cpd-color-bg-critical-subtle);
+}

src/components/MenuItem/MenuItem.stories.tsx

@@ -0,0 +1,54 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import ExtensionsIcon from "@vector-im/compound-design-tokens/icons/extensions.svg";
+import ChatIcon from "@vector-im/compound-design-tokens/icons/chat.svg";
+
+import { MenuItem as MenuItemComponent } from "./MenuItem";
+import { Text } from "../Typography/Text";
+
+export default {
+  title: "MenuItem",
+  component: MenuItemComponent,
+  argTypes: {},
+  args: {},
+} as Meta<typeof MenuItemComponent>;
+
+const Template: StoryFn<typeof MenuItemComponent> = (args) => (
+  <div style={{ width: 300 }}>
+    <MenuItemComponent {...args} Icon={ChatIcon} label="First item">
+      <Text as="span" size="sm">
+        99
+      </Text>
+    </MenuItemComponent>
+    <MenuItemComponent {...args} Icon={ExtensionsIcon} label="Second item" />
+  </div>
+);
+
+export const Primary = Template.bind({});
+Primary.args = { kind: "primary" };
+
+export const Critical = Template.bind({});
+Critical.args = { kind: "critical" };
+
+Primary.parameters = Critical.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=712-6909&mode=dev",
+  },
+};

src/components/MenuItem/MenuItem.test.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+import LeaveIcon from "@vector-im/compound-design-tokens/icons/leave.svg";
+import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
+
+import { MenuItem } from "./MenuItem";
+import { Text } from "../Typography/Text";
+
+describe("MenuItem", () => {
+  it("renders", () => {
+    const { asFragment } = render(
+      <MenuItem kind="critical" Icon={LeaveIcon} label="Leave room" />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it("renders with a child", () => {
+    const { asFragment } = render(
+      <MenuItem Icon={UserProfileIcon} label="People">
+        <Text as="span" size="sm">
+          10
+        </Text>
+      </MenuItem>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,92 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classnames from "classnames";
+import React, {
+  ComponentPropsWithoutRef,
+  ComponentType,
+  ElementType,
+  SVGAttributes,
+} from "react";
+import styles from "./MenuItem.module.css";
+import { Text } from "../Typography/Text";
+import ChevronRightIcon from "@vector-im/compound-design-tokens/icons/chevron-right.svg";
+
+type MenuItemElement = "button" | "label" | "div";
+
+type Props<C extends MenuItemElement> = {
+  /**
+   * The element type of this menu item.
+   * @default button
+   */
+  as?: C;
+  className?: string;
+  /**
+   * The icon to show on this menu item.
+   */
+  Icon: ComponentType<SVGAttributes<SVGElement>>;
+  /**
+   * The label to show on this menu item.
+   */
+  label: string;
+  /**
+   * The color variant of the menu item.
+   * @default primary
+   */
+  kind?: "primary" | "critical";
+  /**
+   * Whether to replace the children with a navigation hint on hover.
+   * @default true
+   */
+  navHint?: boolean;
+} & ComponentPropsWithoutRef<C>;
+
+export const MenuItem = <C extends MenuItemElement = "button">({
+  as,
+  className,
+  Icon,
+  label,
+  kind = "primary",
+  navHint = true,
+  children,
+  ...props
+}: Props<C>) => {
+  const Component = as ?? ("button" as ElementType);
+
+  return (
+    <Component
+      {...props}
+      className={classnames(className, styles.item, {
+        [styles.interactive]: as !== "div",
+      })}
+      data-kind={kind}
+    >
+      <Icon width={24} height={24} className={styles.icon} aria-hidden={true} />
+      <Text className={styles.label} size="md" weight="medium" as="span">
+        {label}
+      </Text>
+      {navHint && (
+        <ChevronRightIcon
+          width={24}
+          height={24}
+          className={styles["nav-hint"]}
+          aria-hidden={true}
+        />
+      )}
+      {children}
+    </Component>
+  );
+};