diff --git a/packages/asc-web-components/radio-button/index.js b/packages/asc-web-components/radio-button/index.js
index 360ca8a17f..c77ec74456 100644
--- a/packages/asc-web-components/radio-button/index.js
+++ b/packages/asc-web-components/radio-button/index.js
@@ -78,19 +78,34 @@ class RadioButton extends React.Component {
}
RadioButton.propTypes = {
+ /** Used as HTML `checked` property for each `` tag */
isChecked: PropTypes.bool,
+ /** Used as HTML `disabled` property for each `` tag */
isDisabled: PropTypes.bool,
+ /** Name of the radiobutton. If missed, `value` will be used */
label: PropTypes.string,
+ /** Font size of link */
fontSize: PropTypes.string,
+ /** Font weight of link */
fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /** Used as HTML `name` property for `` tag. */
name: PropTypes.string.isRequired,
onChange: PropTypes.func,
+ /** Allow you to handle clicking events on component */
onClick: PropTypes.func,
+ /** Used as HTML `value` property for `` tag. Used for identification each radiobutton */
value: PropTypes.string.isRequired,
+ /** Margin between radiobutton. If orientation `horizontal`,
+ * it is `margin-left`(apply for all radiobuttons, except first),
+ * if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) */
spacing: PropTypes.string,
+ /** Accepts class */
className: PropTypes.string,
+ /** Accepts id */
id: PropTypes.string,
+ /** Accepts css style */
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+ /** Position of radiobuttons */
orientation: PropTypes.oneOf(["horizontal", "vertical"]),
};
diff --git a/packages/asc-web-components/radio-button/radio-button.stories.js b/packages/asc-web-components/radio-button/radio-button.stories.js
index 8426ba2110..d942f54583 100644
--- a/packages/asc-web-components/radio-button/radio-button.stories.js
+++ b/packages/asc-web-components/radio-button/radio-button.stories.js
@@ -1,33 +1,40 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import withReadme from "storybook-readme/with-readme";
+import React, { useState, useEffect } from "react";
import RadioButton from ".";
-import Section from "../../../.storybook/decorators/section";
-import { withKnobs, text, boolean } from "@storybook/addon-knobs/react";
-import Readme from "./README.md";
-storiesOf("Components|Input", module)
- .addDecorator(withKnobs)
- .addDecorator(withReadme(Readme))
- .add("radio button", () => {
- return (
-
- {
- window.__STORYBOOK_ADDONS.channel.emit("storybookjs/knobs/change", {
- name: "isChecked",
- value: e.target.checked,
- });
- console.log("onChange", e);
- }}
- />
-
- );
- });
+export default {
+ title: "Components/RadioButton",
+ component: RadioButton,
+ parameters: {
+ docs: {
+ description: { component: "RadioButton allow you to add radiobutton" },
+ },
+ },
+ argTypes: {},
+};
+
+const Template = ({ isChecked, ...args }) => {
+ const [checked, setIsChecked] = useState(isChecked);
+
+ useEffect(() => {
+ setIsChecked(isChecked);
+ }, [isChecked]);
+
+ const onChangeHandler = (e) => {
+ setIsChecked(e.target.checked);
+ };
+
+ return (
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ value: "value",
+ name: "name",
+ label: "Label",
+ fontSize: "13px",
+ fontWeight: "400",
+ isDisabled: false,
+ isChecked: false,
+};