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 React, { useState, useEffect } from "react";
-import { storiesOf } from "@storybook/react";
-import withReadme from "storybook-readme/with-readme";
 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)
+export default {
-  .addDecorator(withKnobs)
+  title: "Components/RadioButton",
-  .addDecorator(withReadme(Readme))
+  component: RadioButton,
-  .add("radio button", () => {
+  parameters: {
-    return (
+    docs: {
-      <Section>
+      description: { component: "RadioButton allow you to add radiobutton" },
-        <RadioButton
+    },
-          value={text("value", "value")}
+  },
-          name={text("name", "name")}
+  argTypes: {},
-          label={text("label", "Label")}
+};
-          fontSize={text("fontSize", "13px")}
+
-          fontWeight={text("fontWeight", "400")}
+const Template = ({ isChecked, ...args }) => {
-          isDisabled={boolean("isDisabled", false)}
+  const [checked, setIsChecked] = useState(isChecked);
-          isChecked={boolean("isChecked", false)}
+
-          onClick={(e) => {
+  useEffect(() => {
-            window.__STORYBOOK_ADDONS.channel.emit("storybookjs/knobs/change", {
+    setIsChecked(isChecked);
-              name: "isChecked",
+  }, [isChecked]);
-              value: e.target.checked,
+
-            });
+  const onChangeHandler = (e) => {
-            console.log("onChange", e);
+    setIsChecked(e.target.checked);
-          }}
+  };
-        />
+
-      </Section>
+  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,
+};