glide-design-system/src/stories/radio-button/RadioButton.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 { RadioButton } from "../../lib";

export default {
  title: "Components/RadioButton",
  component: RadioButton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The RadioButton component allows users to select one option from a set. It supports props for customization such as `name`, `style`, `disabled`, `size`, `children`, `onChange`, `value`, `className`, `label`, and `required`.",
      },
    },
  },
  argTypes: {
    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the radio button component for custom styling.",
    },
    disabled: {
      control: "boolean",
      description: "Disables the radio button.",
    },
    children: {
      control: null,
      description: "The options to be displayed in the radio button group.",
    },
    onChange: {
      action: "changed",
      description:
        "Callback function when the selection changes.eg onChange={(e) => {}}",
    },
    value: {
      control: "text",
      description: "The currently selected value.",
    },
    label: {
      control: "text",
      description: "Label for the radio button group.",
    },
    required: {
      control: "boolean",
      description: "Indicates if the field is required.",
    },
    name: {
      control: "",
      description: "The name attribute for the component.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the radio button component for custom styling.",
    },
    size: {
      control: "radio",
      description: "Determines the size of the radio button.",
      options: ["small", "medium", "large"],
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  name: "example",
  label: "Select an option",
  children: [
    <label key="option1" value="option1">
      Option 1
    </label>,
    <label key="option2" value="option2">
      Option 2
    </label>,
    <label key="option3" value="option3">
      Option 3
    </label>,
  ],
  onChange: (e, newValue) => console.log("Selected value:", newValue),
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the radio button group with default settings.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  ...Default.args,
  style: { backgroundColor: "#f0f0f0" },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Radio Button with custom styles.",
    },
  },
};

export const Disabled = Template.bind({});
Disabled.args = {
  ...Default.args,
  disabled: true,
};
Disabled.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Radio Button with disabled property.",
    },
  },
};

export const RequiredField = Template.bind({});
RequiredField.args = {
  ...Default.args,
  required: true,
  label: "Select an option",
};
RequiredField.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Radio Button with required property.",
    },
  },
};
export const CheckedAndDisabled = Template.bind({});
CheckedAndDisabled.args = {
  ...Default.args,
  value: "option2",
  children: [
    <label key="option1" value="option1" label="Option 1">
      Option 1
    </label>,
    <label key="option2" value="option2" label="Option 2" disabled>
      Option 2
    </label>,
    <label key="option3" value="option3" label="Option 3">
      Option 3
    </label>,
  ],
  disabled: true,
};
CheckedAndDisabled.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Radio Button with checked and disabled property.",
    },
  },
};