Wizard: add description field to Details steps

src/Components/CreateImageWizard/steps/imageName.js

@@ -1,12 +1,20 @@
 import React from 'react';
 
+import { useFormApi } from '@data-driven-forms/react-form-renderer';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
+import { Flex, FlexItem, Text } from '@patternfly/react-core';
 
 import StepTemplate from './stepTemplate';
 
 import CustomButtons from '../formComponents/CustomButtons';
 
+const CharacterCount = () => {
+  const { getState } = useFormApi();
+  const description = getState().values?.['image-description'];
+  return <h1>{description?.length || 0}/250</h1>;
+};
+
 export default {
   StepTemplate,
   id: 'wizard-details',
@@ -43,5 +51,23 @@ export default {
         },
       ],
     },
+    {
+      component: componentTypes.TEXTAREA,
+      name: 'image-description',
+      type: 'text',
+      label: (
+        <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+          <FlexItem>
+            <Text component={'b'}>Description</Text>
+          </FlexItem>
+          <FlexItem>
+            <CharacterCount />
+          </FlexItem>
+        </Flex>
+      ),
+      placeholder: 'Add Description',
+      resizeOrientation: 'vertical',
+      validate: [{ type: validatorTypes.MAX_LENGTH, threshold: 250 }],
+    },
   ],
 };