Add story for disabled form, fix bugs

src/components/elements/input/GeolocationInput.tsx

@@ -67,6 +67,7 @@ const GeolocationInput: React.FC<GeolocationInputProps> = ({
                 buttonRef.current?.focus(); // move focus to Request Location button
               }}
               startIcon={<ClearIcon />}
+              disabled={disabled}
             >
               Clear Map
             </Button>

src/components/elements/input/SsnInput.stories.tsx

@@ -9,6 +9,7 @@ export default {
     label: { control: 'text' },
     onlylast4: { control: 'boolean' },
     value: { control: 'text' },
+    disabled: { control: 'boolean' },
   },
   render: (args: any) => {
     const [{ value }, updateArgs] = useArgs();

src/components/elements/input/SsnInput.tsx

@@ -73,7 +73,7 @@ const SsnInput = ({
           chars: 3,
           inputProps: {
             ...baseInputProps,
-            disabled: onlylast4 ? true : false,
+            disabled: baseInputProps.disabled || onlylast4 ? true : false,
             inputProps: {
               ...baseInputProps.inputProps,
               'aria-label': ariaLabel + ' first 3 digits',
@@ -96,7 +96,7 @@ const SsnInput = ({
           chars: 2,
           inputProps: {
             ...baseInputProps,
-            disabled: onlylast4 ? true : false,
+            disabled: baseInputProps.disabled || onlylast4 ? true : false,
             placeholder: 'XX',
             inputProps: {
               ...baseInputProps.inputProps,
@@ -135,6 +135,7 @@ const SsnInput = ({
           sx={{ maxWidth, ...sx }}
           label={label}
           helperText={helperText}
+          LabelProps={{ disabled: baseInputProps.disabled }}
         >
           <Box
             sx={{

src/modules/form/components/DynamicForm.stories.tsx

@@ -8,13 +8,21 @@ import { Default as ViewStory } from './viewable/DynamicView.stories';
 import { emptyErrorState } from '@/modules/errors/util';
 import formData from '@/test/__mocks__/mockFormDefinition.json';
 import { generateMockValuesForDefinition } from '@/test/utils/testUtils';
-import { FormDefinitionJson, ItemType } from '@/types/gqlTypes';
+import {
+  DisabledDisplay,
+  EnableOperator,
+  FormDefinitionJson,
+  ItemType,
+} from '@/types/gqlTypes';
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const formDefinition: FormDefinitionJson = JSON.parse(JSON.stringify(formData));
 
 export default {
   component: DynamicForm,
   argTypes: { label: { control: 'text' } },
+  parameters: {
+    docs: { disable: true }, // don't render every story on the docs tab
+  },
   decorators: [
     (Story) => (
       <Box>
@@ -69,6 +77,22 @@ WithValuesAsReadOnly.args = {
   errors: emptyErrorState,
 };
 
+export const WithDisabledInputs = Template.bind({});
+WithDisabledInputs.args = {
+  definition: modifyFormDefinition(formDefinition, (item) => {
+    item.enableWhen = [
+      {
+        question: 'string-1',
+        operator: EnableOperator.Equal,
+        answerCode: 'foo',
+      },
+    ];
+    item.disabledDisplay = DisabledDisplay.ProtectedWithValue; // show values
+  }),
+  initialValues: ViewStory.args?.values,
+  errors: emptyErrorState,
+};
+
 // Render a mini form that doesn't have a top-level group
 const miniForm = {
   item: [