feat: add name and defaultValue attributes

okta · Jan 20, 2023 · 1eb7608 · 1eb7608
1 parent 6b34afa
commit 1eb7608
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 21 deletions.
diff --git 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 <Radio> components within the group. Must include two or more.
+   */
+  children: Array<React.ReactElement<typeof Radio>>;
 }
 
 export const RadioGroup = ({
+  name = "radio",
   label,
   hint,
   disabled,
   invalid,
   error,
   children,
-}: RadioGroupProps) => (
-  <FormControl component="fieldset" disabled={disabled} error={invalid}>
-    <FormLabel component="legend">{label}</FormLabel>
-    {hint && <FormHelperText id="radio-hint">{hint}</FormHelperText>}
-    <MuiRadioGroup
-      defaultValue="Lightspeed"
-      name="radio-buttons-group"
-      aria-describedby="radio-hint radio-error"
-    >
-      {children}
-    </MuiRadioGroup>
-    {error && (
-      <FormHelperText id="radio-error" error>
-        <span style={visuallyHidden}>Error:</span> {error}
-      </FormHelperText>
-    )}
-  </FormControl>
-);
+  defaultValue,
+}: RadioGroupProps) => {
+  // Setting ariaDescribedBy this way to avoid linter's prefer-const error
+  const ariaDescribedBy = [
+    hint && `${name}-hint`,
+    error && `${name}-error`,
+  ].filter(Boolean);
+
+  return (
+    <FormControl component="fieldset" disabled={disabled} error={invalid}>
+      <FormLabel component="legend">{label}</FormLabel>
+      {hint && <FormHelperText id={`${name}-hint`}>{hint}</FormHelperText>}
+      <MuiRadioGroup
+        defaultValue={defaultValue}
+        name={`${name}-group`}
+        aria-describedby={ariaDescribedBy.join(" ")}
+      >
+        {children}
+      </MuiRadioGroup>
+      {error && (
+        <FormHelperText id={`${name}-error`} error>
+          <span style={visuallyHidden}>Error:</span> {error}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+};
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
@@ -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}
     >
       <Radio value="lightspeed" label="Lightspeed" />
       <Radio value="Warp Speed" label="Warp Speed" />