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

export default {
  title: "Components/Badge",
  component: Badge,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Badge component is used to display a small badge with text.",
      },
    },
  },
  argTypes: {
    label: {
      control: "text",
      description: "The text content of the badge.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the badge component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the badge component for custom styling.",
    },
    badgeStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the backdrop component for custom styling.",
    },
    badgeClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the badge component for custom styling.",
    },
    onClick: {
      action: "changed",
      description: "Function excutes when the user clicks on the badge",
    },
    children: {
      control: false,
      description: "Content rendered inside the badge.",
    },
  },
};

const Template = (args) => {
  return (
    <Badge {...args}>
      <span>Mail</span>
    </Badge>
  );
};

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

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

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  label: "44",
  style: {
    backgroundColor: "#d7d7d7",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Badge component with custom styles.",
    },
  },
};

export const CustomBadgeStyle = Template.bind({});
CustomBadgeStyle.args = {
  label: "44",
  badgeStyle: {
    backgroundColor: "#d7d7d7",
  },
};

CustomBadgeStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Badge component with custom badge styles.",
    },
  },
};