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

export default {
  title: "Components/Skeleton",
  component: Skeleton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Skeleton component is used as a placeholder while content is loading, providing a visual representation of where the content will eventually appear. It helps improve the user experience by indicating that the content is being fetched and will be displayed shortly. The component supports various customization options, including variant, styling, and dimensions.",
      },
    },
  },
  argTypes: {
    variant: {
      control: "radio",
      description:
        "Specifies the shape of the skeleton placeholder, such as rectangular, or circle.",
      options: ["reactangular", "circle"],
    },
    width: {
      control: "",
      description: "Defines the width of the skeleton placeholder.",
    },
    height: {
      control: "",
      description: "Defines the height of the skeleton placeholder.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the skeleton component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the skeleton component for custom styling.",
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {};

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

export const CustomWidthAndHeight = Template.bind({});
CustomWidthAndHeight.args = {
  height: "10px",
  width: "150px",
};

CustomWidthAndHeight.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use skeleton with custom width and height.",
    },
  },
};

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

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