Merge pull request #363 from Panenco/feat/radiobutton-story

Feat/radiobutton

src/components/radiobutton/index.tsx

@@ -2,7 +2,6 @@ import cx from 'classnames';
 
 import { Text } from 'components';
 import * as React from 'react';
-import { idGenerator } from 'utils/helpers';
 import { useTheme } from 'utils/hooks';
 
 import { InputPropsType } from '../../utils/types';
@@ -14,18 +13,38 @@ interface WrapperProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
 }
 
 export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Is checked;
+   * @default false
+   * */
+  checked?: boolean;
+  /**
+   * Error text;
+   */
   error?: string;
+  /**
+   * Child html input component props. Will be removed in next version;
+   */
   inputProps?: InputPropsType;
+  /**
+   * RadioButton label;
+   */
   label?: string;
-  pointColor?: string; // will be removed in next version
+  /**
+   * Point color;
+   */
+  pointColor?: string;
+  // will be removed in next version
+  /**
+   * Wrapper props;
+   */
   wrapperProps?: WrapperProps;
 }
 
 export const Radio = React.forwardRef<HTMLLabelElement, RadioButtonProps>(
   (
     {
       label,
-      id,
       className,
       checked,
       value,
@@ -39,20 +58,18 @@ export const Radio = React.forwardRef<HTMLLabelElement, RadioButtonProps>(
     ref,
   ): JSX.Element => {
     const theme = useTheme();
-    const uniqueID = idGenerator();
-    const defaultId = id || uniqueID;
-    const { className: inputClassName, ...otherInputProps } = inputProps;
+    const { className: inputClassName, id, ...otherInputProps } = inputProps;
 
     return (
       <StyledRadio theme={theme} ref={ref} error={error} pointColor={pointColor} {...wrapperProps}>
-        <label className={cx('label', disabled && 'labelDisabled', className)} htmlFor={id || defaultId}>
+        <label className={cx('label', disabled && 'labelDisabled', className)} htmlFor={id}>
           <input
             type='radio'
             className={cx('radiobox', inputClassName)}
-            id={id || defaultId}
+            id={id}
             disabled={disabled}
-            checked={checked || value === id}
-            value={id || value || defaultId}
+            checked={checked}
+            value={value}
             {...otherInputProps}
             {...props}
           />

stories/radiobutton/Radio.stories.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Radio } from 'components/radiobutton';
+
+export default {
+  title: 'Example/Radio',
+  component: Radio,
+  argTypes: {
+    pointColor: { control: 'color' },
+  },
+  args: {
+    label: 'Radio button label',
+    checked: true,
+    inputProps: {
+      id: 'radio-button',
+    },
+  },
+} as ComponentMeta<typeof Radio>;
+
+const Template: ComponentStory<typeof Radio> = (args) => <Radio {...args} />;
+
+export const Default = Template.bind({});
+
+export const Error = Template.bind({});
+
+Error.args = {
+  error: 'Validation error',
+  checked: false,
+};
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+  disabled: true,
+  checked: false,
+};