glide-design-system/src/stories/menu/Menu.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useRef, useState } from "react";
import { Menu } from "../../lib/components/menu/Menu";
import { Button } from "../../lib/components/button/Button";
import { MenuItem } from "../../lib/components/menuItem/MenuItem";

export default {
  title: "Components/Menu",
  component: Menu,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Menu component is used to display a list of options or actions in a dropdown or popover format. It is commonly used in navigation bars, context menus, and other places where users need to choose from a list of actions or navigate to different sections. The component supports various customization options such as positioning, triggering events, and styling. ",
      },
    },
  },
  argTypes: {
    open: {
      control: "",
      description: "If open, the menu is visible.",
    },
    onClose: {
      control: "",
      description: "Funtion to be called when the menu is closed.",
    },
    position: {
      control: "",
      description: "Position of the menu.",
    },
    anchorEl: {
      control: "",
      description:
        "The element that the menu is anchored to, typically the element that triggers the menu.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the menu component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the menu component for custom styling.",
    },
    children: {
      control: false,
      description: "Content to be rendered inside the menu.",
    },
    id: {
      control: "",
      description: "The unique identifier for the menu.",
    },
    name: {
      control: "",
      description: "The name attribute for the menu.",
    },
  },
};

const Template = (args) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button
        color="primary"
        variant="contained"
        onClick={(e) => {
          setAnchorEl(e.currentTarget);
          setOpen(true);
        }}
      >
        Open Menu
      </Button>

      <Menu
        {...args}
        onClose={() => {
          setAnchorEl(null);
          setOpen(false);
        }}
        open={open}
        anchorEl={anchorEl}
      >
        <MenuItem>1st</MenuItem>
        <MenuItem>2nd</MenuItem>
      </Menu>
    </div>
  );
};

export const Default = Template.bind({});
Default.args = {};
Default.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Menu component. The menu visibility is toggled by clicking the button.",
    },
  },
};