fix: 🐛 refactor info-field component (#1525)

* fix: 🐛 refactor info-field component

Overall context of how the `<InfoField/>` was changed to the correct
order.  Corrected css grid to have the order of
`label,input-field,helper-text`. Also refactored all component instances
affected by the change.

* refactor: 💡 refactor styling for icon to be center

refactor will get the icon as close to center as possible.

ui/admin/app/components/form/credential-store/static/index.hbs

@@ -70,14 +70,13 @@
       </Hds::Form::RadioCard::Group>
     {{else}}
       <InfoField
-        @value={{t (concat 'resources.credential-store.help.' @model.type)}}
+        @value={{t (concat 'resources.credential-store.types.' @model.type)}}
         @icon='keychain'
         as |F|
       >
         <F.Label>{{t 'form.type.label'}}</F.Label>
-        <F.HelperText>{{t
-            (concat 'resources.credential-store.types.' @model.type)
-          }}
+        <F.HelperText>
+          {{t (concat 'resources.credential-store.help.' @model.type)}}
         </F.HelperText>
       </InfoField>
     {{/if}}

ui/admin/app/components/form/credential-store/vault/index.hbs

@@ -70,14 +70,13 @@
       </Hds::Form::RadioCard::Group>
     {{else}}
       <InfoField
-        @value={{t (concat 'resources.credential-store.help.' @model.type)}}
+        @value={{t (concat 'resources.credential-store.types.' @model.type)}}
         @icon='vault'
         as |F|
       >
         <F.Label>{{t 'form.type.label'}}</F.Label>
-        <F.HelperText>{{t
-            (concat 'resources.credential-store.types.' @model.type)
-          }}
+        <F.HelperText>
+          {{t (concat 'resources.credential-store.help.' @model.type)}}
         </F.HelperText>
       </InfoField>
     {{/if}}

ui/admin/app/components/form/credential/json/index.hbs

@@ -79,11 +79,11 @@
     </form.fieldset>
   {{else}}
     <InfoField
-      @value={{t (concat 'resources.credential.help.' @model.type)}}
+      @value={{t (concat 'resources.credential.types.' @model.type)}}
       as |F|
     >
       <F.Label>{{t 'form.type.label'}}</F.Label>
-      <F.HelperText>{{t (concat 'resources.credential.types.' @model.type)}}
+      <F.HelperText>{{t (concat 'resources.credential.help.' @model.type)}}
       </F.HelperText>
     </InfoField>
 

ui/admin/app/components/form/credential/ssh_private_key/index.hbs

@@ -63,11 +63,11 @@
     </Hds::Form::RadioCard::Group>
   {{else}}
     <InfoField
-      @value={{t (concat 'resources.credential.help.' @model.type)}}
+      @value={{t (concat 'resources.credential.types.' @model.type)}}
       as |F|
     >
       <F.Label>{{t 'form.type.label'}}</F.Label>
-      <F.HelperText>{{t (concat 'resources.credential.types.' @model.type)}}
+      <F.HelperText>{{t (concat 'resources.credential.help.' @model.type)}}
       </F.HelperText>
     </InfoField>
   {{/if}}

ui/admin/app/components/form/credential/username_password/index.hbs

@@ -63,11 +63,11 @@
     </Hds::Form::RadioCard::Group>
   {{else}}
     <InfoField
-      @value={{t (concat 'resources.credential.help.' @model.type)}}
+      @value={{t (concat 'resources.credential.types.' @model.type)}}
       as |F|
     >
       <F.Label>{{t 'form.type.label'}}</F.Label>
-      <F.HelperText>{{t (concat 'resources.credential.types.' @model.type)}}
+      <F.HelperText>{{t (concat 'resources.credential.help.' @model.type)}}
       </F.HelperText>
     </InfoField>
   {{/if}}

ui/admin/app/components/form/target/details/index.hbs

@@ -64,12 +64,12 @@
 
   {{else}}
     <InfoField
-      @value={{t (concat 'resources.target.help.' @model.type)}}
+      @value={{t (concat 'resources.target.types.' @model.type)}}
       @icon={{this.icon}}
       as |F|
     >
       <F.Label>{{t 'form.type.label'}}</F.Label>
-      <F.HelperText>{{t (concat 'resources.target.types.' @model.type)}}
+      <F.HelperText>{{t (concat 'resources.target.help.' @model.type)}}
       </F.HelperText>
     </InfoField>
   {{/if}}

ui/admin/app/styles/app.scss

@@ -458,7 +458,7 @@
 
 .info-field {
   .hds-form-field--layout-vertical {
-    grid-template-areas: 'label' 'helper-text' 'text-input';
+    grid-template-areas: 'label' 'text-input' 'helper-text';
 
     .hds-form-label {
       font-size: sizing.rems(m);
@@ -466,26 +466,25 @@
       line-height: sizing.rems(m) + sizing.rems(xxs);
     }
 
-    .hds-form-helper-text {
-      color: var(--token-form-label-color);
-      font-size: sizing.rems(m);
-      grid-area: helper-text;
-    }
-
     .hds-form-text-input {
       background-color: transparent;
       border: 0;
       grid-area: text-input;
-      line-height: sizing.rems(m) + sizing.rems(xxs);
-      margin-top: sizing.rems(xs);
+      font-size: sizing.rems(m);
       padding: 0;
     }
+
+    .hds-form-helper-text {
+      color: var(--token-form-label-color);
+      line-height: sizing.rems(m) + sizing.rems(xxs);
+      grid-area: helper-text;
+    }
   }
 
   &.has-icon {
     .flight-icon {
       position: absolute;
-      transform: translatey(sizing.rems(xl) - sizing.rems(s));
+      transform: translatey(sizing.rems(xl) - sizing.rems(xs));
     }
 
     .hds-form-helper-text,

ui/admin/tests/integration/components/info-field-test.js

@@ -11,15 +11,15 @@ module('Integration | Component | info-field', function (hooks) {
 
     await render(
       hbs`
-        <InfoField @value="Description" as |F|>
+        <InfoField @value="JSON" as |F|>
           <F.Label>Type</F.Label>
-          <F.HelperText>JSON</F.HelperText>
+          <F.HelperText>Description</F.HelperText>
         </InfoField>
       `
     );
     assert.dom('.info-field').isVisible();
     assert.dom('.info-field .hds-form-label').hasText('Type');
-    assert.dom('.info-field .hds-form-helper-text').hasText('JSON');
+    assert.dom('.info-field .hds-form-helper-text').hasText('Description');
     assert.dom('.info-field .hds-form-text-input').isVisible();
   });
 
@@ -28,9 +28,9 @@ module('Integration | Component | info-field', function (hooks) {
 
     await render(
       hbs`
-        <InfoField @value="Description" @icon='apple' as |F|>
+        <InfoField @value="JSON" @icon='apple' as |F|>
           <F.Label>Type</F.Label>
-          <F.HelperText>JSON</F.HelperText>
+          <F.HelperText>Description</F.HelperText>
         </InfoField>
       `
     );
@@ -38,7 +38,7 @@ module('Integration | Component | info-field', function (hooks) {
     assert.dom('.info-field .hds-form-label').hasText('Type');
     assert
       .dom('.info-field .hds-form-helper-text:last-of-type')
-      .hasText('JSON');
+      .hasText('Description');
     assert.dom('[data-test-icon="apple"]').isVisible();
     assert.dom('.info-field .hds-form-text-input').isVisible();
   });