glide-design-system/src/stories/menuItem/MenuItem.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 from "react";
import { MenuItem } from "../../lib/components/menuItem/MenuItem";

export default {
  title: "Components/MenuItem",
  component: MenuItem,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The MenuItem component represents a menu item element typically used in navigation or dropdown menus.",
      },
    },
  },
  argTypes: {
    icon: {
      control: "",
      description: " Specifies an icon to display alongside the menu item.",
    },
    iconPosition: {
      control: "",
      description:
        "Controls the positioning of the icon relative to the menu item content.",
    },
    children: {
      control: "",
      description:
        "Content displayed within the menu item, such as text or additional elements.",
    },
    onClick: {
      control: "",
      description: "Callback function triggered when the menu item is clicked.",
    },
    value: {
      control: "",
      description:
        "Value that will be received in the callback function when he menu item is clicked.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the menu item component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class to apply to the menu item component for custom styling.",
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the menu item component for custom styling.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class to apply to the container of the menu item component for custom styling.",
    },
    id: {
      control: "",
      description: "Unique identifier for the menu item.",
    },
    name: {
      control: "",
      description:
        "Name attribute for the menu item, used in form submissions.",
    },
    loading: { table: { disable: true } },
  },
};

const Template = (args) => {
  return (
    <>
      <MenuItem {...args}>Text</MenuItem>
    </>
  );
};

export const Default = Template.bind({});
Default.args = {
  // Add any additional default args if needed
};
Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Menu Item component.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  style: {
    backgroundColor: "#d7d7d7",
  },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use menu item component with custom styles.",
    },
  },
};

export const CustomContainerStyle = Template.bind({});
CustomContainerStyle.args = {
  containerStyle: {
    backgroundColor: "#d7d7d7",
  },
};
CustomContainerStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use menu item component with custom container styles.",
    },
  },
};