glide-design-system/src/stories/checkbox-group/CheckBoxgroup.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 { storiesOf } from "@storybook/react";
import { CheckboxGroup } from "../../lib";

export default {
  title: "Components/Checkbox-Group",
  component: CheckboxGroup,
  tags: ["autodocs"],
  argTypes: {
    onChange: {
      action: "changed",
      description:
        "Function to handle changes checkboxgroup component.eg (onChange=(value)=>{consoloe.log(value)}).",
    },
    value: {
      control: "array",
      description: "Value for the checkboxgroup component.",
    },
    options: {
      control: "array",
      description: "Options for the checkboxgroup component.",
    },

    label: {
      control: "text",
      description: "Label of the Checkbox group component.",
    },
    required: {
      control: "boolean",
      description: "Specifies if the fields are required.",
      defaultValue: false,
    },
    labelStyle: {
      control: "",
      description:
        "Additional CSS class styles to apply to the label of the  Checkbox Group component for custom styling.",
    },
    defaultValue: {
      control: "",
      description: "Default checked option for the Checkbox group component.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Checkbox Group component for custom styling.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Checkbox Group component for custom styling.",
    },
    name: {
      control: "",
      description: "The name attribute for the Checkbox group component.",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "The Checkbox group component is used to display and manage multiple checkbox input fields. It accepts various props for customization, including onChange, required, label, value.",
      },
    },
  },
};

const checkboxOptions = [
  { value: "checkBox1", label: "checkBox1" },
  { value: "checkBox2", label: "CheckBox2" },
  { value: "checkBox3", label: "CheckBox3" },
  { value: "checkBox4", label: "CheckBox4" },
  { value: "checkBox5", label: "CheckBox5" },
  { value: "checkBox6", label: "CheckBox6" },
  { value: "checkBox7", label: "CheckBox7" },
  { value: "java", label: "Java" },
];
const checkBoxValues = ["checkbox1", "checkbox6", "checkbox7"];

const Template = ({ onChange, required, label, value, options }) => {
  return (
    <CheckboxGroup
      onChange={onChange}
      required={required}
      label={label}
      value={value}
      options={options}
    />
  );
};

export const Default = Template.bind({});
Default.args = {
  onChange: function (event) {
    return event;
  },
  required: false,
  label: "Check box group",
  options: checkboxOptions,
  onChange: function (event) {
    return event;
  },
};
Default.parameters = {
  docs: {
    description: {
      story: "Displays the Checkbox options for the Checkbox group componenet.",
    },
  },
};

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

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

export const Label = Template.bind({});
Label.args = {
  label: "Courses",
  options: checkboxOptions,
};

Label.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the checkbox group componenet with label.",
    },
  },
};

export const Value = Template.bind({});
Value.args = {
  label: "Courses",
  options: checkboxOptions,
  value: checkBoxValues,
  name: "Group",
};

Value.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the checkbox group componenet with pre-checked items.",
    },
  },
};