feat: add MenuItem component

src/components/MenuItem/MenuItem.module.scss

+@use "../../variables/fonts.scss" as *;
+@use "../../variables/colors.scss" as *;
+
+.menuItem {
+  @include h5;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  transition: color 0.2s;
+}
+
+.menuItem--light {
+  color: $primary_dark_gray;
+}
+
+.menuItem--light:hover {
+  color: $primary_black;
+}
+
+.menuItem--dark {
+  color: $primary_light_gray;
+}
+
+.menuItem--dark:hover {
+  color: $primary_white;
+}

src/components/MenuItem/MenuItem.stories.tsx

+import type { Meta, StoryFn } from "@storybook/react";
+
+import { MenuItem } from "@components/MenuItem";
+import type { IMenuItem } from "@components/MenuItem";
+
+import ThemeVariants from "@constants/ThemeVariants";
+
+const meta: Meta<typeof MenuItem> = {
+  title: "Menu Item",
+  component: MenuItem,
+  argTypes: {
+    theme: {
+      description: "Вариант внешнего вида в зависимости от темы",
+      defaultValue: ThemeVariants.light,
+      options: ["light", "dark"],
+      control: {
+        type: "inline-radio",
+      },
+    },
+    text: {
+      defaultValue: "Menu item",
+      description: "Текст для элемента меню",
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<IMenuItem> = (args: IMenuItem) => (
+  <MenuItem {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: ThemeVariants.light,
+  text: "Menu item",
+};

src/components/MenuItem/MenuItem.test.tsx

+import { cleanup, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it } from "vitest";
+
+import { MenuItem } from "@components/MenuItem";
+
+import styles from "./MenuItem.module.scss";
+
+import ThemeVariants from "@constants/ThemeVariants";
+
+afterEach(cleanup);
+
+describe("Testing ScrollButton", () => {
+  it("render light state", async () => {
+    const { getByTestId } = render(<MenuItem text="Menu item" />);
+    const scrollButton = getByTestId("menuitemTest") as HTMLButtonElement;
+    expect(scrollButton).toBeInTheDocument();
+    expect(scrollButton).toHaveTextContent("Menu item");
+    expect(scrollButton).toHaveClass(
+      `${styles.menuItem} ${styles[`menuItem--${ThemeVariants.light}`]}`,
+    );
+    await userEvent.hover(scrollButton);
+  });
+
+  it("render dark state", async () => {
+    const { getByTestId } = render(
+      <MenuItem text="Menu item" theme={ThemeVariants.dark} />,
+    );
+    const scrollButton = getByTestId("menuitemTest") as HTMLButtonElement;
+    expect(scrollButton).toBeInTheDocument();
+    expect(scrollButton).toHaveTextContent("Menu item");
+    expect(scrollButton).toHaveClass(
+      `${styles.menuItem} ${styles[`menuItem--${ThemeVariants.dark}`]}`,
+    );
+    await userEvent.hover(scrollButton);
+  });
+});

src/components/MenuItem/MenuItem.tsx

+import type { FC } from "react";
+
+import styles from "./MenuItem.module.scss";
+
+import ThemeVariants from "@constants/ThemeVariants";
+
+export interface IMenuItem {
+  theme?: ThemeVariants;
+  text: string;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}
+
+const MenuItem: FC<IMenuItem> = ({
+  theme = ThemeVariants.light,
+  text,
+  className,
+  onClick,
+}) => {
+  return (
+    <button
+      type="button"
+      data-testid="menuitemTest"
+      className={`${styles.menuItem} ${styles[`menuItem--${theme}`]} ${className}`}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default MenuItem;

src/components/MenuItem/index.ts

+export { default as MenuItem } from "./MenuItem";
+export type { IMenuItem } from "./MenuItem";