Web: Components: added story for RadioButton

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 `<input>` tag */
   isChecked: PropTypes.bool,
+  /** Used as HTML `disabled` property for each `<input>` 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 `<input>` 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 `<input>` 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"]),
 };
 

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 (
-      <Section>
-        <RadioButton
-          value={text("value", "value")}
-          name={text("name", "name")}
-          label={text("label", "Label")}
-          fontSize={text("fontSize", "13px")}
-          fontWeight={text("fontWeight", "400")}
-          isDisabled={boolean("isDisabled", false)}
-          isChecked={boolean("isChecked", false)}
-          onClick={(e) => {
-            window.__STORYBOOK_ADDONS.channel.emit("storybookjs/knobs/change", {
-              name: "isChecked",
-              value: e.target.checked,
-            });
-            console.log("onChange", e);
-          }}
-        />
-      </Section>
-    );
-  });
+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 (
+    <RadioButton {...args} isChecked={checked} onChange={onChangeHandler} />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  value: "value",
+  name: "name",
+  label: "Label",
+  fontSize: "13px",
+  fontWeight: "400",
+  isDisabled: false,
+  isChecked: false,
+};