101 lines
2.1 KiB
JavaScript
101 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import RadioButtonGroup from "./";
|
|
|
|
export default {
|
|
title: "Components/RadioButtonGroup",
|
|
component: RadioButtonGroup,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: "RadioButtonGroup allow you to add group radiobutton",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
options: {
|
|
control: {
|
|
type: "multi-select",
|
|
options: ["radio1", "radio2", "radio3"],
|
|
},
|
|
},
|
|
onClick: {
|
|
cation: "onClick",
|
|
},
|
|
labelFirst: {
|
|
description: "Label for 1st radiobutton (only storybook)",
|
|
control: "text",
|
|
},
|
|
labelSecond: {
|
|
description: "Label for 2nd radiobutton (only storybook)",
|
|
control: "text",
|
|
},
|
|
labelThird: {
|
|
description: "Label for 3rd radiobutton (only storybook)",
|
|
control: "text",
|
|
},
|
|
},
|
|
};
|
|
|
|
const Template = ({
|
|
options,
|
|
onClick,
|
|
labelFirst,
|
|
labelSecond,
|
|
labelThird,
|
|
...args
|
|
}) => {
|
|
const values = ["first", "second", "third"];
|
|
const updateOptions = (options) => {
|
|
const updatedOptions = options.map((item) => {
|
|
switch (item) {
|
|
case "radio1":
|
|
return {
|
|
value: values[0],
|
|
label: labelFirst,
|
|
};
|
|
case "radio2":
|
|
return {
|
|
value: values[1],
|
|
label: labelSecond,
|
|
};
|
|
case "radio3":
|
|
return {
|
|
value: values[2],
|
|
label: labelThird,
|
|
};
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
return updatedOptions;
|
|
};
|
|
|
|
const updatedOptions = updateOptions(options);
|
|
|
|
return (
|
|
<RadioButtonGroup
|
|
{...args}
|
|
options={updatedOptions}
|
|
selected={updatedOptions[0].value}
|
|
onClick={(e) => {
|
|
onClick(e);
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
orientation: "horizontal",
|
|
width: "100%",
|
|
isDisabled: false,
|
|
fontSize: "13px",
|
|
fontWeight: "400",
|
|
spacing: "15px",
|
|
name: "group",
|
|
options: ["radio1", "radio3"],
|
|
labelFirst: "First radiobtn",
|
|
labelSecond: "Second radiobtn",
|
|
labelThird: "Third radiobtn",
|
|
};
|