Car 9534: new component "radioButtonGroupWithTitle"

.storybook/stories/radioButtonGroupWithTitle.stories.tsx

@@ -0,0 +1,93 @@
+import React, { FC } from "react"
+
+import { action } from "@storybook/addon-actions"
+
+import { StoryProps } from "./storyProps"
+import RadioButtonGroupWithTitle, { RadioButtonGroupProps } from "../../src/components/radioButtonGroupWithTitle"
+
+const onChange = () => action("onChange")
+
+export default {
+  title: "Radio Button Group with Title",
+  component: RadioButtonGroupWithTitle,
+  args: {
+    storyName: "",
+    title: "Radio Group",
+    radioInputs: 
+    [
+        {
+            name: "radioButtonGroupWithTitle", 
+            value: "A",
+            checked: false,
+            onChange: (e) => {
+                onChange()(e)
+            }, 
+            renderLabel:() => "option 1",
+            disabled: true,
+            error: "test"
+        }, 
+        {
+            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: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+interface Props extends StoryProps<JSX.Element>, RadioButtonGroupProps {}
+
+const Template: FC<Props> = (args) => {
+  return (
+      <>
+    <div className="text-2xl mb-20">{args.storyName}</div>
+        <RadioButtonGroupWithTitle
+          {...args}
+        />
+      </>
+
+  )
+}
+
+export const Standard = Template.bind({})
+Standard.args = {
+    storyName: "Standard",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  storyName: "Disabled",
+  disabled: true,
+}
+
+export const Required = Template.bind({})
+Required.args = {
+  storyName: "Required",
+  required: true,
+}
+
+export const WithErrorMessage = Template.bind({})
+WithErrorMessage.args = {
+  storyName: "With error message",
+  error: "Error message",
+}

src/components/radioButtonGroupWithTitle.tsx

@@ -0,0 +1,47 @@
+import React, { FC, ReactElement } from "react"
+
+import RadioButton, { RadioButtonProps } from "./radioButton"
+import WithValidationError from "./fieldHelpers/withValidationError"
+import Label from "./fieldHelpers/label"
+
+type RadioInputProps = Omit<RadioButtonProps, "error" | "disabled">
+
+interface Props {
+  title: string
+  required?: boolean
+  disabled?: boolean
+  radioInputs: RadioInputProps[]
+  error?: string
+}
+
+const RadioButtonGroup: FC<Props> = ({
+  title,
+  required = false,
+  disabled = false,
+  radioInputs,
+  error,
+}): ReactElement => {
+  const renderInputs = (hasError) => (
+    <div className="w-12/12">
+      <Label fieldName={title} required={required} />
+      <div className="flex">
+        {radioInputs.map((radioInput, index) => (
+          <RadioButton
+            key={index}
+            {...radioInput}
+            disabled={disabled}
+            error={hasError}
+          />
+        ))}
+      </div>
+    </div>
+  )
+  return (
+    <WithValidationError error={error}>
+      {(hasError) => renderInputs(hasError)}
+    </WithValidationError>
+  )
+}
+
+export default RadioButtonGroup
+export { Props as RadioButtonGroupProps }

src/index.ts

@@ -11,6 +11,7 @@ import Slider from "./components/slider"
 import Select from "./components/select"
 import RangeSelect from "./components/rangeSelect"
 import RangeInput from "./components/rangeInput"
+import RadioButtonGroupWithTitle from "./components/radioButtonGroupWithTitle"
 import RadioButton from "./components/radioButton"
 import PreviewCard from "./components/previewCard/index"
 import Pill from "./components/pill"
@@ -68,6 +69,7 @@ export {
   Select,
   Checkbox,
   RadioButton,
+  RadioButtonGroupWithTitle,
   WithLabel,
   WithValidationError,
   useModal,