glide-design-system/src/stories/backdrop/Backdrop.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 Backdrop from "../../lib/components/backdrop/Backdrop";
import { Button } from "../../lib/components/button/Button";

export default {
  title: "Components/Backdrop",
  component: Backdrop,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Backdrop component is used to display a backdrop overlay. It becomes visible when the `open` prop is set to true.",
      },
    },
  },
  argTypes: {
    open: {
      control: "boolean",
      description: "If open, the backdrop is visible.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles styles to apply to the backdrop component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the backdrop component for custom styling.",
    },
    circularProgressStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the circular progress for custom styling.",
    },
    circularProgressClassName: {
      control: "",
      description:
        "Additional CSS class names to apply to the circular progress for custom styling.",
    },
    children: { table: { disable: true } }, // Hide the 'children' property control
  },
};

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

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

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

      <Backdrop open={isVisible} {...args} />
    </>
  );
};

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

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  // Add any additional CustomStyle args if needed
  style: {
    backgroundColor: "red",
  },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Backdrop component with custom styles for Backdrop.",
    },
  },
};

export const CustomProgressCircleStyle = Template.bind({});
CustomProgressCircleStyle.args = {
  // Add any additional CustomStyle args if needed
  circularProgressStyle: {
    border: "3px solid red",
    borderTop: "3px solid #d7d7d7",
  },
};
CustomProgressCircleStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Backdrop component with custom styles for circular progress.",
    },
  },
};