glide-design-system/src/stories/divider/Divider.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 Divider from "../../lib/components/Divider/Divider";

export default {
  title: "Components/Divider",
  component: Divider,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Divider component is used to create a visual separation between different sections of content.",
      },
    },
  },
  argTypes: {
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Divider component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Divider component for custom styling.",
    },
  },
};

const Template = (args) => <Divider {...args} />;
export const Default = Template.bind({});
Default.args = {};

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the divider component.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  style: {
    borderColor: "red",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the divider component with custom styles.",
    },
  },
};