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

export default {
  title: "Components/Checkbox",
  component: Checkbox,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Checkbox component is used to capture boolean input from the user. It accepts `label` for the text label, `checked` for the checked state, and `onChange` for handling changes.",
      },
    },
  },
  argTypes: {
    onClick: {
      control: "",
      description: "Function to be called when the checkbox is clicked.",
    },
    disabled: {
      control: "",
      description: "If true, the checkbox is disabled.",
    },
    label: {
      control: "",
      description: "The label for the checkbox.",
    },

    onchange: {
      control: "",
      description: "Function to be called when the checkbox is changed.",
    },
    checked: {
      control: "",
      description: "If true, the checkbox is checked.",
    },
    required: {
      control: "",
      description: "If true, the checkbox is marked as required.",
    },
    children: {
      control: false,
      description:
        "The content to be displayed inside the checkbox, such as text.",
    },

    value: {
      control: "",
      description: "Pre filled value of the checkbox.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the Checkbox component for custom styling.",
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the Checkbox component.",
    },
    id: {
      control: "",
      description: "The unique identifier for the checkbox element.",
    },
    name: {
      control: "",
      description: "The name attribute for the checkbox element.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Checkbox component for custom styling.",
    },
    style: {
      control: "",
      description: "Additional CSS styles to apply to the Checkbox component.",
    },
  },
};

const Template = (args) => <Checkbox {...args} />;
export const Default = Template.bind({});
Default.args = {
  label: "Checkbox",
};

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

export const Disabled = Template.bind({});
Disabled.args = {
  label: "Checkbox",
  disabled: true,
};

Disabled.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Checkbox componenet with disabled property.",
    },
  },
};

export const Required = Template.bind({});
Required.args = {
  label: "Checkbox",
  required: true,
};

Required.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Checkbox componenet with required property.",
    },
  },
};

export const Checked = Template.bind({});
Checked.args = {
  label: "Checkbox",
  checked: true,
};

Checked.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Checkbox componenet with checked property.",
    },
  },
};