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

export default {
  title: "Components/Chip",
  component: Chip,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Chip component is used to display a small block of information.",
      },
    },
  },
  argTypes: {
    type: {
      control: "radio",
      description: "The type of the chip which determines the styling.",
      options: ["success", "warning", "info", "error", "disable"],
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Chip component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Chip component for custom styling.",
    },
    children: {
      control: "",
      description:
        "The content to be displayed inside the chip, such as text or icons.",
    },
    id: {
      control: "",
      description: "The unique identifier for the chip.",
    },
    name: {
      control: "",
      description: "The name attribute for the chip.",
    },
    // Hide the 'children' property control
    // size: { table: { disable: true } },
    // value: { table: { disable: true } },
    // label: { table: { disable: true } },
  },
};

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

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

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  style: {
    border: "1px solid red",
  },
};

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