feat: new component

.storybook/stories/radioButtonGroupWithTitle.stories.tsx

@@ -3,23 +3,29 @@ import React, { FC } from "react"
 import { action } from "@storybook/addon-actions"
 
 import { StoryProps } from "./storyProps"
-import StoryContainer from "./storyContainer"
 import RadioButtonGroupWithTitle, { RadioButtonGroupProps } from "../../src/components/radioButtonGroupWithTitle"
 
 const onChange = () => action("onChange")
-const initialValue = "B"
 
 export default {
   title: "Radio Button Group with Title",
   component: RadioButtonGroupWithTitle,
   args: {
     storyName: "",
     title: "Radio Group",
-    value: initialValue,
-    checked: false,
-    onChange: (e) => {
-      onChange()(e)
-    },
+    radioInputs: [{name: "radioButtonGroupWithTitle", value: "A",
+  checked: false,
+  onChange: (e) => {
+    onChange()(e)
+  }, renderLabel:() => "option 1"}, {name: "radioButtonGroupWithTitle", value: "B",
+  checked: false,
+  onChange: (e) => {
+    onChange()(e)
+  }, renderLabel:() => "option 2"}, {name: "radioButtonGroupWithTitle", value: "C",
+  checked: false,
+  onChange: (e) => {
+    onChange()(e)
+  }, renderLabel:() => "option 3"}]
   },
   argTypes: {
     storyName: {
@@ -35,7 +41,7 @@ interface Props extends StoryProps<JSX.Element>, RadioButtonGroupProps {}
 const Template: FC<Props> = (args) => {
   return (
       <>
-    <div className="text-2xl mb-20">{args.title}</div>
+    <div className="text-2xl mb-20">{args.storyName}</div>
         <RadioButtonGroupWithTitle
           {...args}
         />
@@ -46,31 +52,17 @@ const Template: FC<Props> = (args) => {
 
 export const Standard = Template.bind({})
 Standard.args = {
-    required: true,
-  storyName: "Standard",
-  radioInputs: [{name: "radioButtonGroupWithTitle", value: initialValue,
-  checked: false,
-  onChange: (e) => {
-    onChange()(e)
-  }, renderLabel:() => "labelgff fgfgdg"}, {name: "radioButtonGroupWithTitle", value: initialValue,
-  checked: false,
-  onChange: (e) => {
-    onChange()(e)
-  }, renderLabel:() => "label"}, {name: "radioButtonGroupWithTitle", value: initialValue,
-  checked: false,
-  onChange: (e) => {
-    onChange()(e)
-  }, renderLabel:() => "label"}, {name: "radioButtonGroupWithTitle", value: initialValue,
-  checked: false,
-  onChange: (e) => {
-    onChange()(e)
-  }, renderLabel:() => "label"}, {name: "radioButtonGroupWithTitle", value: initialValue,
-  checked: false,
-  onChange: (e) => {
-    onChange()(e)
-  }, renderLabel:() => "label"}, {name: "radioButtonGroupWithTitle", value: initialValue,
-  checked: false,
-  onChange: (e) => {
-    onChange()(e)
-  }, renderLabel:() => "label"}]
+    storyName: "Standard",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  storyName: "Disabled",
+  disabled: true,
+}
+
+export const Required = Template.bind({})
+Required.args = {
+  storyName: "Required",
+  required: true,
 }

src/components/radioButtonGroupWithTitle.tsx

@@ -6,18 +6,20 @@ import Label from "./fieldHelpers/label"
 interface Props {
   title: string
   required?: boolean
+  disabled?: boolean
   radioInputs: RadioButtonProps[]
 }
 
 function RadioButtonGroup({
   title,
   required = false,
+  disabled = false,
   radioInputs,
 }: Props): ReactElement {
   return (
     <div className="w-12/12">
       <Label fieldName={title} required={required} />
-      <div className="flex w-12/12 justify-between">
+      <div className="flex justify-between">
         {radioInputs.map((radioInput, index) => (
           <RadioButton
             key={index}
@@ -26,7 +28,7 @@ function RadioButtonGroup({
             value={radioInput.value}
             checked={radioInput.checked}
             renderLabel={radioInput.renderLabel}
-            labelPosition={radioInput.labelPosition}
+            disabled={disabled}
           />
         ))}
       </div>