add back in nested examples

Author: aresnik11

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.stories.tsx

@@ -32,6 +32,7 @@ export const Default = () => {
         inputField: '',
         radioGroupField: undefined,
         textAreaField: '',
+        nestedCheckboxesField: [],
       },
       validationRules: {
         checkboxField: { required: 'you need to check this.' },
@@ -137,6 +138,42 @@ export const Default = () => {
         label="text area field"
         name="textAreaField"
       />
+      <ConnectedFormGroup
+        field={{
+          component: ConnectedNestedCheckboxes,
+          options: [
+            {
+              value: 'frontend',
+              label: 'Frontend Technologies',
+              options: [
+                { value: 'react', label: 'React' },
+                {
+                  value: 'vue',
+                  label: 'Vue.js',
+                  options: [
+                    { value: 'test', label: 'Test' },
+                    { value: 'test2', label: 'Test2' },
+                  ],
+                },
+                { value: 'angular', label: 'Angular' },
+              ],
+            },
+            {
+              value: 'backend',
+              label: 'Backend Technologies',
+              options: [
+                { value: 'node', label: 'Node.js' },
+                { value: 'python', label: 'Python' },
+                { value: 'java', label: 'Java' },
+              ],
+            },
+          ],
+          onUpdate: (selectedValues) =>
+            console.log('Selected:', selectedValues),
+        }}
+        label="nested checkboxes field"
+        name="nestedCheckboxesField"
+      />
     </ConnectedForm>
   );
 };

packages/styleguide/src/lib/Organisms/GridForm/GridForm.stories.tsx

@@ -116,6 +116,39 @@ const meta: Meta<typeof GridForm> = {
         },
         size: 4,
       },
+      {
+        label: 'Nested checkboxes',
+        name: 'nested-checkboxes',
+        type: 'nested-checkboxes',
+        options: [
+          {
+            value: 'frontend',
+            label: 'Frontend Technologies',
+            options: [
+              { value: 'react', label: 'React' },
+              {
+                value: 'vue',
+                label: 'Vue.js',
+                options: [
+                  { value: 'test', label: 'Test' },
+                  { value: 'test2', label: 'Test2' },
+                ],
+              },
+              { value: 'angular', label: 'Angular' },
+            ],
+          },
+          {
+            value: 'backend',
+            label: 'Backend Technologies',
+            options: [
+              { value: 'node', label: 'Node.js' },
+              { value: 'python', label: 'Python' },
+              { value: 'java', label: 'Java' },
+            ],
+          },
+        ],
+        size: 12,
+      },
     ],
     submit: {
       contents: 'Submit Me!?',