glide-design-system/src/stories/drawer/Drawer.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, { useState } from "react";
import { Button } from "../../lib/components/button/Button";
import Drawer from "../../lib/components/drawer/Drawer";

export default {
  title: "Components/Drawer",
  component: Drawer,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Drawer component is used to create a panel that slides in from the side of the screen. It is commonly used for navigation menus, additional content, or contextual actions. The drawer can be toggled open or closed, and supports various customization options.",
      },
    },
  },
  argTypes: {
    open: {
      control: "boolean",
      description: "If open, the drawer is visible.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Drawer component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Drawer component for custom styling.",
    },
    position: {
      control: "radio",
      description: "The position of the drawer.",
      options: ["right", "left", "top", "bottom"],
    },
    onClose: {
      control: "",
      description: "Function to be called when the drawer is closed.",
    },
    paperClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the paper for custom styling.",
    },
    paperStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the paper for custom styling.",
    },
    children: {
      control: "",
      description:
        "The content to be displayed inside the drawer, such as text or icons or image.",
    },
  },
};

const Template = (args) => {
  const [isVisible, setIsVisible] = useState(false);

  const handleClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <>
      <Button style={{ zIndex: "9999" }} onClick={handleClick}>
        {isVisible ? "Hide Drawer" : "Show Drawer"}
      </Button>

      <Drawer open={isVisible} {...args}>
        <p>Drawer Content</p>
      </Drawer>
    </>
  );
};

export const Default = Template.bind({});
Default.args = {
  // Add any additional default args if needed
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the drawer component. The drawer visibility is toggled by clicking the button.",
    },
  },
};

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

export const CustomPaperStyle = Template.bind({});
CustomPaperStyle.args = {
  paperStyle: {
    backgroundColor: "red",
  },
};
CustomPaperStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Drawer component with custom paper styles.",
    },
  },
};