glide-design-system/src/stories/Loader/Loader.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 { ProgressCircle } from "../../lib/components/loader/ProgressCircle";

export default {
  title: "Components/Progress Circle",
  component: ProgressCircle,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "The Progress Circle component displays a circular progress indicator. It accepts props for color and size to customize its appearance.",
      },
    },
  },
  argTypes: {
    color: {
      control: "color",
      description: "The color of the Progress Circle component.",
    },
    size: {
      control: "select",
      options: ["small", "medium", "large"],
      description: "The size of the Progress Circle component.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the of the Progress Circle component for custom styling.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the Progress Circle component for custom styling.",
    },
    style: {
      control: "",
      description: "Custom styles that can be applied to the Progress Circle component",
    },
  },
};

const Template = ({ size, color }) => (
  <ProgressCircle color={color} size={size} />
);

export const Default = Template.bind({});
Default.args = {
  size: "medium",

  color: "black",
};
Default.parameters = {
  docs: {
    description: {
      story:
        "Displays the Progress Circle component with default configuration.",
    },
  },
};

export const Color = Template.bind({});
Color.args = {
  color: "#A3876A",
};
Color.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Progress Circle component with a custom color.",
    },
  },
};

export const Size = Template.bind({});
Size.args = {
  size: "large",
};
Size.parameters = {
  docs: {
    description: {
      story:
        "This example demonstrates the usage of the Progress Circle component with a different size.",
    },
  },
};