glide-design-system/src/stories/button/Button.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 { Button } from "../../lib";
import homeIcon from "../../lib/assests/homeIcon.png";

export default {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
  argTypes: {
    onClick: {
      action: "changed",
      description: "Function to handle onclick of button.",
    },
    title: {
      control: "",
      description: "Displays the content in inside the button.",
    },
    loading: {
      control: "boolean",
      description: "Displays the loader button.",
    },
    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the button for custom styling.",
    },
    disabled: {
      control: "boolean",
      description: "Displays the disabled button.",
    },
    color: {
      options: ["primary", "secondary"],
      control: "rdio",
    },
    icon: {
      control: "",
      description: "You can add a icon as element.",
    },
    variant: {
      options: ["outlined", "contained"],
      control: "radio",
      description: "Defines the button style variant.",
    },
    children: {
      control: "",
      description:
        "The content to be displayed inside the button, such as text or icons.",
    },
    size: {
      options: ["small", "medium", "large"],
      control: "radio",
      description: "Sets the size of the button.",
    },
    iconPosition: {
      options: ["start", "end"],
      control: "radio",
      description: "Position of the icon within the button.",
    },
    buttonContentClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the content of the Button component for custom styling.",
    },
    id: {
      control: "",
      description: "The unique identifier for the button.",
    },
    name: {
      control: "",
      description: "The name attribute for the button.",
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the Button component.",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "The Button component is used to trigger actions or events. It accepts various props for customization, including onClick, loading, style, disabled, color, icon, variant, size, and iconPosition.",
      },
    },
  },
};

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

Default.args = {
  children: "Button",
  onClick: () => {
    alert("Button Clicked");
  },
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This is the default configuration of the Button component, displaying a default button.",
    },
  },
};

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

Loading.args = {
  children: "Button",
  loading: true,
};
Loading.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Button componenet loader button.",
    },
  },
};

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

Style.args = {
  children: "Button",
  style: { width: "80px" },
};
Style.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Button componenet with the custom styles.",
    },
  },
};

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

Disabled.args = {
  children: "Button",
  disabled: true,
};
Disabled.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Button componenet disabled button.",
    },
  },
};

export const Color = Template.bind({});
Color.args = {
  children: "Button",
  color: "secondary",
};
Color.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Button componenet with primary and secondary color button.",
    },
  },
};

export const Variant = Template.bind({});
Variant.args = {
  children: "Button",
  variant: "outlined",
};
Variant.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Button componenet with diffrent variant of the button.",
    },
  },
};

export const Size = Template.bind({});
Size.args = {
  children: "Button",
  size: "large",
};
Size.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Button componenet with size of the button.",
    },
  },
};

export const Icon = Template.bind({});
Icon.args = {
  children: "Button",
  color: "secondary",
  icon: <img style={{ width: "20px", height: "20px" }} src={homeIcon} />,
};
Icon.parameters = {
  docs: {
    description: {
      story: "This example shows how to use the Button componenet with icon.",
    },
  },
};

export const IconPosition = Template.bind({});
IconPosition.args = {
  children: "Button",
  color: "secondary",
  icon: <img style={{ width: "20px", height: "20px" }} src={homeIcon} />,
  iconPosition: "end",
};
IconPosition.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Button componenet with icon with icon position.",
    },
  },
};