Update docstring and add test

Author: david0xd

packages/snaps-sdk/src/jsx/components/form/Checkbox.ts

@@ -8,7 +8,7 @@ import { createSnapComponent } from '../../component';
  * @property checked - Whether the checkbox is checked or not.
  * @property label - An optional label for the checkbox.
  * @property variant - An optional variant for the checkbox.
- * @property disabled - Whether the Checkbox is disabled.
+ * @property disabled - Whether the checkbox is disabled.
  */
 export type CheckboxProps = {
   name: string;
@@ -29,7 +29,7 @@ const TYPE = 'Checkbox';
  * @param props.checked - Whether the checkbox is checked or not.
  * @param props.label - An optional label for the checkbox.
  * @param props.variant - An optional variant for the checkbox.
- * @param props.disabled - Whether the Checkbox is disabled.
+ * @param props.disabled - Whether the checkbox is disabled.
  * @returns A checkbox element.
  * @example
  * <Checkbox name="accept-terms" />

packages/snaps-sdk/src/jsx/components/form/Dropdown.test.tsx

@@ -66,4 +66,41 @@ describe('Dropdown', () => {
       key: null,
     });
   });
+
+  it('renders disabled dropdown with options', () => {
+    const result = (
+      <Dropdown name="dropdown" value="foo" disabled={true}>
+        <Option value="foo">Foo</Option>
+        <Option value="bar">Bar</Option>
+      </Dropdown>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Dropdown',
+      props: {
+        name: 'dropdown',
+        value: 'foo',
+        disabled: true,
+        children: [
+          {
+            type: 'Option',
+            props: {
+              value: 'foo',
+              children: 'Foo',
+            },
+            key: null,
+          },
+          {
+            type: 'Option',
+            props: {
+              value: 'bar',
+              children: 'Bar',
+            },
+            key: null,
+          },
+        ],
+      },
+      key: null,
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/form/Dropdown.ts

@@ -9,7 +9,7 @@ import type { OptionElement } from './Option';
  * state in the form data.
  * @property value - The selected value of the dropdown.
  * @property children - The children of the dropdown.
- * @property disabled - Whether the Dropdown is disabled.
+ * @property disabled - Whether the dropdown is disabled.
  */
 export type DropdownProps = {
   name: string;
@@ -28,7 +28,7 @@ const TYPE = 'Dropdown';
  * state in the form data.
  * @param props.value - The selected value of the dropdown.
  * @param props.children - The children of the dropdown.
- * @param props.disabled - Whether the Dropdown is disabled.
+ * @param props.disabled - Whether the dropdown is disabled.
  * @returns A dropdown element.
  * @example
  * <Dropdown name="dropdown">

packages/snaps-sdk/src/jsx/components/form/Radio.ts

@@ -6,7 +6,7 @@ import { createSnapComponent } from '../../component';
  * @property value - The value of the radio option. This is used to populate the
  * state in the form data.
  * @property children - The text to display.
- * @property disabled - Whether the Radio is disabled.
+ * @property disabled - Whether the radio is disabled.
  */
 type RadioProps = {
   value: string;
@@ -24,7 +24,7 @@ const TYPE = 'Radio';
  * @param props.value - The value of the radio option. This is used to populate the
  * state in the form data.
  * @param props.children - The text to display.
- * @param props.disabled - Whether the Radio is disabled.
+ * @param props.disabled - Whether the radio is disabled.
  * @returns A radio element.
  * @example
  * <RadioGroup name="radio-group">

packages/snaps-sdk/src/jsx/components/form/RadioGroup.ts

@@ -11,7 +11,7 @@ const TYPE = 'RadioGroup';
  * state in the form data.
  * @property value - The value of the radio group element.
  * @property children - Radio options in form of <Radio> elements.
- * @property disabled - Whether the RadioGroup is disabled.
+ * @property disabled - Whether the radio group is disabled.
  */
 type RadioGroupProps = {
   name: string;
@@ -23,6 +23,11 @@ type RadioGroupProps = {
 /**
  * A RadioGroup component, used to display multiple choices, where only one can be chosen.
  *
+ * @param props.name - The name of the dropdown. This is used to identify the
+ * state in the form data.
+ * @param props.value - The value of the radio group element.
+ * @param props.children - Radio options in form of <Radio> elements.
+ * @param props.disabled - Whether the radio group is disabled.
  * @returns A RadioGroup element.
  * @example
  * <RadioGroup />

packages/snaps-sdk/src/jsx/components/form/Selector.ts

@@ -10,7 +10,7 @@ import type { SelectorOptionElement } from './SelectorOption';
  * @property title - The title of the selector. This is displayed in the UI.
  * @property value - The selected value of the selector.
  * @property children - The children of the selector.
- * @property disabled - Whether the Selector is disabled.
+ * @property disabled - Whether the selector is disabled.
  */
 export type SelectorProps = {
   name: string;
@@ -31,7 +31,7 @@ const TYPE = 'Selector';
  * @param props.title - The title of the selector field. This is displayed in the UI.
  * @param props.value - The selected value of the selector.
  * @param props.children - The children of the selector.
- * @property disabled - Whether the Selector is disabled.
+ * @property disabled - Whether the selector is disabled.
  * @returns A selector element.
  * @example
  * <Selector name="selector">