diff --git a/packages/odyssey-react-mui/src/RadioGroup.tsx b/packages/odyssey-react-mui/src/RadioGroup.tsx index 37bfaaaeb3..8cb2dd2ea2 100644 --- a/packages/odyssey-react-mui/src/RadioGroup.tsx +++ b/packages/odyssey-react-mui/src/RadioGroup.tsx @@ -10,40 +10,83 @@ * See the License for the specific language governing permissions and limitations under the License. */ -import { FormControl, FormLabel, FormHelperText, visuallyHidden } from "./"; +import { + FormControl, + FormLabel, + FormHelperText, + visuallyHidden, + Radio, +} from "./"; import { RadioGroup as MuiRadioGroup } from "@mui/material"; export interface RadioGroupProps { + /** + * The name of the radio group, which only needs to be changed + * if there are multiple radio groups on the same screen + */ + name?: string; + /** + * The text label for the radio group + */ label: string; + /** + * Optional hint text + */ hint?: string | undefined; + /** + * Disables the whole radio group + */ disabled?: boolean | undefined; + /** + * Declares the group invalid + */ invalid?: boolean | undefined; - error?: any | undefined; - children: any; + /** + * The error text for an invalid group + */ + error?: string | undefined; + /** + * The text value of the radio that should be selected by default + */ + defaultValue?: string; + /** + * The components within the group. Must include two or more. + */ + children: Array>; } export const RadioGroup = ({ + name = "radio", label, hint, disabled, invalid, error, children, -}: RadioGroupProps) => ( - - {label} - {hint && {hint}} - - {children} - - {error && ( - - Error: {error} - - )} - -); + defaultValue, +}: RadioGroupProps) => { + // Setting ariaDescribedBy this way to avoid linter's prefer-const error + const ariaDescribedBy = [ + hint && `${name}-hint`, + error && `${name}-error`, + ].filter(Boolean); + + return ( + + {label} + {hint && {hint}} + + {children} + + {error && ( + + Error: {error} + + )} + + ); +}; diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx index 739a78845e..a832f7e7ab 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx @@ -45,6 +45,10 @@ export default { control: "text", defaultValue: "Speed", }, + name: { + control: "text", + defaultValue: "label", + }, }, decorators: [MuiThemeDecorator], }; @@ -57,6 +61,7 @@ const DefaultTemplate: Story = (args) => { error={args.error} label={args.label} hint={args.hint} + defaultValue={args.defaultValue} >