CreateImageWizard: Add expandable section for azure description

The azure step's descriptive text under the `Authorizing an Azure
account` title text is now expandable. Clicking the title shows or
hides it.

src/Components/CreateImageWizard/ImageCreator.js

@@ -9,6 +9,7 @@ import TargetEnvironment from './formComponents/TargetEnvironment';
 import Packages from './formComponents/Packages';
 import RadioWithPopover from './formComponents/RadioWithPopover';
 import AzureAuthButton from './formComponents/AzureAuthButton';
+import AzureAuthExpandable from './formComponents/AzureAuthExpandable';
 import ActivationKeys from './formComponents/ActivationKeys';
 import Select from '@data-driven-forms/pf4-component-mapper/select';
 
@@ -29,6 +30,7 @@ const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, defaul
                 defaultArch
             },
             'radio-popover': RadioWithPopover,
+            'azure-auth-expandable': AzureAuthExpandable,
             'azure-auth-button': AzureAuthButton,
             'activation-keys': ActivationKeys,
             ...customComponentMapper

src/Components/CreateImageWizard/formComponents/AzureAuthExpandable.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Button, ExpandableSection, Text, Title } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import './AzureAuthExpandable.scss';
+
+const AzureAuthExpandable = () => {
+    const [ expanded, setExpanded ] = useState(true);
+
+    return (
+        <>
+            <ExpandableSection
+                className='azureAuthExpandable'
+                toggleText={ <Title headingLevel="h3">Authorizing an Azure account</Title> }
+                onToggle={ () => setExpanded(!expanded) }
+                isExpanded={ expanded }>
+                <Text>
+                To authorize Image Builder to push images to Microsoft Azure, the account owner
+                must configure Image Builder as an authorized application for a specific tenant ID and give it the role of
+                &quot;Contributor&quot; to at least one resource group.<br />
+                </Text>
+                <small>
+                    <Button
+                        component="a"
+                        target="_blank"
+                        variant="link"
+                        icon={ <ExternalLinkAltIcon /> }
+                        iconPosition="right"
+                        isInline
+                        href="https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow">
+                        Learn more about OAuth 2.0
+                    </Button>
+                </small>
+            </ExpandableSection>
+        </>);
+};
+
+export default AzureAuthExpandable;

src/Components/CreateImageWizard/formComponents/AzureAuthExpandable.scss

@@ -0,0 +1,7 @@
+.azureAuthExpandable {
+    --pf-c-expandable-section__toggle--Color: var(--pf-global--Color--100);
+    --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--Color--100);
+	--pf-c-expandable-section__toggle--active--Color: var(--pf-global--Color--100);
+	--pf-c-expandable-section__toggle--focus--Color: var(--pf-global--Color--100);
+    --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--Color--100);
+}

src/Components/CreateImageWizard/steps/msAzure.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
-import { Title, Text, Button } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { Title, Text } from '@patternfly/react-core';
 import nextStepMapper from './imageOutputStepMapper';
 
 export default {
@@ -14,34 +13,25 @@ export default {
     fields: [
         {
             component: componentTypes.PLAIN_TEXT,
-            name: 'azure-text-component',
+            name: 'azure-description',
+            label: <Text>
+                Image Builder sends an image to an authorized Azure account.
+            </Text>
+        },
+        {
+            component: 'azure-auth-expandable',
+            name: 'azure-auth-expandable'
+        },
+        {
+            component: componentTypes.PLAIN_TEXT,
+            name: 'azure-destination',
             label: <>
-                <Text>
-                    Image Builder sends an image to an authorized Azure account.
-                </Text>
-                <Title headingLevel="h3">Authorizing an Azure account</Title>
-                <Text>
-            To authorize Image Builder to push images to Microsoft Azure, the account owner
-            must configure Image Builder as an authorized application for a specific tenant ID and give it the role of
-            &quot;Contributor&quot; to at least one resource group.<br />
-                </Text>
-                <small>
-                    <Button
-                        component="a"
-                        target="_blank"
-                        variant="link"
-                        icon={ <ExternalLinkAltIcon /> }
-                        iconPosition="right"
-                        isInline
-                        href="https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow">
-                      Learn more about OAuth 2.0
-                    </Button>
-                </small>
                 <Title headingLevel="h2">Image Destination</Title>
                 <Text>
-                    Your image will be uploaded to the resource group in the subscription you specify.
+                        Your image will be uploaded to the resource group in the subscription you specify.
                 </Text>
             </>
+
         },
         {
             component: componentTypes.TEXT_FIELD,