Radio done

package.json

@@ -53,14 +53,15 @@
     "types-ramda": "0.29.4"
   },
   "dependencies": {
-    "@chakra-ui/focus-lock": "2.1.0",
-    "@chakra-ui/react": "2.8.1",
-    "@chakra-ui/system": "2.6.2",
+    "@chakra-ui/focus-lock": ">=2.1.0",
+    "@chakra-ui/react": ">=2.8.1",
+    "@chakra-ui/system": ">=2.6.2",
     "@charlietango/use-native-lazy-loading": "1.10.0",
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": ">=11.11.1",
+    "@emotion/styled": ">=11.11.0",
     "downshift": "6.1.7",
-    "framer-motion": "10.16.4",
+    "esbuild": "^0.19.10",
+    "framer-motion": ">=10.16.4",
     "react-datepicker": "4.14.1",
     "react-intersection-observer": "9.2.2",
     "system-font-css": "2.0.2",
@@ -70,8 +71,8 @@
   },
   "peerDependencies": {
     "@chakra-ui/focus-lock": ">=2.1.0",
-    "@chakra-ui/system": ">=2.6.2",
     "@chakra-ui/react": ">=2.8.1",
+    "@chakra-ui/system": ">=2.6.2",
     "@emotion/react": ">=11.11.1",
     "@emotion/styled": ">=11.11.0",
     "framer-motion": ">=10.16.4",
@@ -123,9 +124,9 @@
     "prettier": "2.4.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
     "react-autosuggest": "10.0.2",
     "react-docgen-typescript-loader": "3.7.2",
+    "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "remark-gfm": "3.0.1",
     "sass": "1.60.0",

src/components/Radio/Radio.mdx

@@ -2,15 +2,17 @@ import { ArgTypes, Canvas, Description, Meta } from "@storybook/blocks";
 
 import * as RadioStories from "./Radio.stories";
 import Link from "../Link/Link";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import { changelogData } from "./radioChangelogData";
 
 <Meta of={RadioStories} />
 
 # Radio
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.22.0`   |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.22.0`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
@@ -20,6 +22,7 @@ import Link from "../Link/Link";
 - {<Link href="#browser-states" target="_self">Browser States</Link>}
 - {<Link href="#helper-and-error-text" target="_self">Helper and Error Text</Link>}
 - {<Link href="#label-using-jsx-elements" target="_self">Label Using JSX Elements</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -67,3 +70,7 @@ a layout to the label. View the `RadioGroup` documentation for this
 usage.
 
 <Canvas of={RadioStories.LabelUsingJSXElements} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/Radio/Radio.stories.tsx

@@ -1,6 +1,7 @@
 import { Box, HStack, VStack } from "@chakra-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
+import { argsBooleanType } from "../../helpers/storybookUtils";
 
 import Heading from "../Heading/Heading";
 import Radio from "./Radio";
@@ -13,24 +14,14 @@ const meta: Meta<typeof Radio> = {
     className: { control: false },
     id: { control: false },
     isChecked: { control: false },
-    isDisabled: {
-      table: { defaultValue: { summary: false } },
-    },
-    isInvalid: {
-      table: { defaultValue: { summary: false } },
-    },
-    isRequired: {
-      table: { defaultValue: { summary: false } },
-    },
+    isDisabled: argsBooleanType(),
+    isInvalid: argsBooleanType(),
+    isRequired: argsBooleanType(),
     key: { table: { disable: true } },
     onChange: { control: false },
     ref: { table: { disable: true } },
-    showHelperInvalidText: {
-      table: { defaultValue: { summary: true } },
-    },
-    showLabel: {
-      table: { defaultValue: { summary: true } },
-    },
+    showHelperInvalidText: argsBooleanType(true),
+    showLabel: argsBooleanType(true),
   },
 };
 

src/components/Radio/Radio.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   chakra,
+  ChakraComponent,
   Radio as ChakraRadio,
   useMultiStyleConfig,
   useStyleConfig,
@@ -51,7 +52,12 @@ export interface RadioProps {
   value?: string;
 }
 
-export const Radio: React.FC<any> = chakra(
+export const Radio: ChakraComponent<
+  React.ForwardRefExoticComponent<
+    React.PropsWithChildren<RadioProps> & React.RefAttributes<HTMLSelectElement>
+  >,
+  React.PropsWithChildren<RadioProps>
+> = chakra(
   forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
     const {
       className,

src/components/Radio/radioChangelogData.ts

@@ -0,0 +1,19 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Chakra 2.8 update."],
+  },
+];

src/helpers/storybookUtils.ts

@@ -0,0 +1,7 @@
+/**
+ * For usage in Storybook stories to set the default value of a boolean prop.
+ */
+export const argsBooleanType = (defaultValue = false) => ({
+  control: { type: "boolean" },
+  table: { defaultValue: { summary: defaultValue } },
+});