UX: Update banner image field to use help text (#30666)

### What's changed?
- Add support for`@helpText` in the FormKit component.
- Updated the about config page to replace `@description` with
`@helpText` for the banner image field

### Before
<img width="525" alt="image"
src="https://github.com/user-attachments/assets/e8cdcca7-1b46-406f-8b6b-815e65dd5d9c"
/>

### After
<img width="256" alt="image"
src="https://github.com/user-attachments/assets/8656b866-5654-4f67-8515-f58a7b2b14c0"
/>


Internal: /t/138358/2

app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs

@@ -109,7 +109,7 @@ export default class AdminConfigAreasAboutGeneralSettings extends Component {
       <form.Field
         @name="aboutBannerImage"
         @title={{i18n "admin.config_areas.about.banner_image"}}
-        @description={{i18n "admin.config_areas.about.banner_image_help"}}
+        @helpText={{i18n "admin.config_areas.about.banner_image_help"}}
         @onSet={{this.setImage}}
         as |field|
       >

app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs

@@ -107,6 +107,12 @@ export default class FKControlWrapper extends Component {
           {{yield components}}
         </@component>
 
+        {{#if @field.helpText}}
+          <FKText
+            class="form-kit__container-help-text"
+          >{{@field.helpText}}</FKText>
+        {{/if}}
+
         <FKMeta @field={{@field}} @error={{this.error}} />
       </div>
     </div>

app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs

@@ -136,6 +136,14 @@ export default class FKFieldData extends Component {
     return this.args.description;
   }
 
+  /**
+   * Help text of the field.
+   * @type {string}
+   */
+  get helpText() {
+    return this.args.helpText;
+  }
+
   /**
    * Indicates whether to show the field's title.
    * Defaults to `true`.

app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs

@@ -75,6 +75,7 @@ export default class FKField extends Component {
       @title={{@title}}
       @tooltip={{@tooltip}}
       @description={{@description}}
+      @helpText={{@helpText}}
       @showTitle={{@showTitle}}
       @collectionIndex={{@collectionIndex}}
       @set={{@set}}

app/assets/stylesheets/common/form-kit/_field.scss

@@ -38,6 +38,12 @@
     font-size: var(--font-down-1-rem);
   }
 
+  .form-kit__container-help-text {
+    margin: 0;
+    font-size: var(--font-down-1-rem);
+    color: var(--primary-medium);
+  }
+
   .form-kit__container-title,
   .form-kit__container-description,
   .form-kit__container-content {

config/locales/client.en.yml

@@ -5781,7 +5781,7 @@ en:
           community_title_help: "Short description, shown in the browser tab, for key pages such as categories and topic lists."
           banner_image: "Banner image"
           banner_image_help: |
-            This will be used on your About page. Recommended size: 1100x300px. Accepted types: JPG, PNG, and SVG up to 10MB.
+            Recommended: 1100x300px. Formats: JPG, PNG, SVG (max 10MB).
           contact_information: "Contact information"
           community_owner: "Community owner"
           community_owner_placeholder: "Johnny Smith"