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

export default {
  title: "Components/Avatar",
  component: Avatar,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Avatar component is used to display a user's profile picture, initials, or icon, providing a visual representation of the user. It can be customized with various props to change its size, shape, and appearance.",
      },
    },
  },
  argTypes: {
    label: {
      control: "text",
      description: "The label of the avatar",
    },
    onClick: {
      control: "",
      description: "Function to be called when the Avatar is clicked",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the avatar component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the avatar component for custom styling.",
    },

    children: { table: { disable: true } },
    size: { table: { disable: true } },
    id: {
      control: "",
      description: "The unique identifier for the avatar.",
    },
    name: {
      control: "",
      description: "The name attribute for the avatar.",
    },
  },
};

const Template = (args) => <Avatar {...args} />;

export const Default = Template.bind({});
Default.args = {
  label: "K",
};
Default.parameters = {
  docs: {
    description: {
      story: "This is the default configuration of the Avatar component.",
    },
  },
};

export const CustomStyle = Template.bind({});

CustomStyle.args = {
  label: "K",
  style: {
    backgroundColor: "red",
    color: "black",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Avatar component with a custom style and label.",
    },
  },
};