Redesign the skill form for both github and native mode

Signed-off-by: Anil Vishnoi <[email protected]>

Author: vishnoianil

src/components/Contribute/AuthorInformation.tsx

@@ -68,7 +68,8 @@ const AuthorInformation: React.FC<Props> = ({ formType, reset, formData, setDisa
   return (
     <>
       <h2>
-        Author Information <span style={{ color: 'red' }}>*</span>
+        <strong>Author Information </strong>
+        <span style={{ color: 'red' }}>*</span>
       </h2>
       <p>Provide your information required for a GitHub DCO sign-off.</p>
       <FormGroup isRequired key={'author-info-details-email'} label="Email address">

src/components/Contribute/Skill/AttributionInformation/AttributionInformation.tsx

@@ -1,16 +1,7 @@
 import React, { useEffect } from 'react';
 import { checkSkillFormCompletion } from '../validation';
 import { SkillFormData } from '@/types';
-import {
-  ValidatedOptions,
-  FormFieldGroupExpandable,
-  FormFieldGroupHeader,
-  FormGroup,
-  TextInput,
-  FormHelperText,
-  HelperText,
-  HelperTextItem
-} from '@patternfly/react-core';
+import { ValidatedOptions, FormGroup, TextInput, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 interface Props {
@@ -93,22 +84,12 @@ const AttributionInformation: React.FC<Props> = ({
   };
 
   return (
-    <FormFieldGroupExpandable
-      toggleAriaLabel="Details"
-      header={
-        <FormFieldGroupHeader
-          titleText={{
-            text: (
-              <p>
-                Attribution Information <span style={{ color: 'red' }}>*</span>
-              </p>
-            ),
-            id: 'attribution-info-id'
-          }}
-          titleDescription="Provide attribution information."
-        />
-      }
-    >
+    <>
+      <h2>
+        <strong>Attribution Information</strong> <span style={{ color: 'red' }}>*</span>
+      </h2>
+      <p>Provide attribution information for the skill.</p>
+
       <FormGroup isRequired key={'attribution-info-details-title_work'} label="Work title">
         <TextInput
           isRequired
@@ -172,7 +153,7 @@ const AttributionInformation: React.FC<Props> = ({
           </FormHelperText>
         )}
       </FormGroup>
-    </FormFieldGroupExpandable>
+    </>
   );
 };
 

src/components/Contribute/Skill/FilePathInformation/FilePathInformation.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PathService from '@/components/PathService/PathService';
-import { FormFieldGroupExpandable, FormFieldGroupHeader, FormGroup } from '@patternfly/react-core';
+import { FormGroup } from '@patternfly/react-core';
 
 interface Props {
   reset?: boolean;
@@ -10,27 +10,16 @@ interface Props {
 
 const FilePathInformation: React.FC<Props> = ({ reset, path, setFilePath }) => {
   return (
-    <FormFieldGroupExpandable
-      isExpanded
-      toggleAriaLabel="Details"
-      header={
-        <FormFieldGroupHeader
-          titleText={{
-            text: (
-              <p>
-                Taxonomy Directory Path <span style={{ color: 'red' }}>*</span>
-              </p>
-            ),
-            id: 'file-path-info-id'
-          }}
-          titleDescription="Specify the directory location within taxonomy repository structure for the QnA Yaml and Attribution files."
-        />
-      }
-    >
+    <>
+      <h2>
+        <strong>Taxonomy Directory Path</strong> <span style={{ color: 'red' }}>*</span>
+      </h2>
+      <p>Specify the directory location within taxonomy repository structure for the QnA Yaml and Attribution files.</p>
+
       <FormGroup isRequired key={'file-path-service-id'}>
         <PathService reset={reset} rootPath="skills" path={path} handlePathChange={setFilePath} />
       </FormGroup>
-    </FormFieldGroupExpandable>
+    </>
   );
 };