feat(components/forms): add hintText input to multi file attachment…

… component (#2211)

apps/e2e/forms-storybook/src/app/file-attachment/file-attachment.component.html

@@ -1,6 +1,7 @@
 <div style="width: 60%">
-  <label class="sky-control-label"> File attachment </label>
   <sky-file-drop
+    labelText="File attachment"
+    hintText="File attachment hint text"
     [acceptedTypes]="acceptedTypes"
     (filesChanged)="filesUpdated($event)"
     [allowLinks]="true"
@@ -28,8 +29,8 @@
 </div>
 
 <div style="width: 60%" *ngIf="basic">
-  <label class="sky-control-label"> File attachment links removed</label>
   <sky-file-drop
+    labelText="File attachment links removed"
     [acceptedTypes]="acceptedTypes"
     [allowLinks]="false"
     (filesChanged)="filesUpdated($event)"

apps/playground/src/app/components/forms/file-attachment/file-attachment.component.html

@@ -1,6 +1,7 @@
 <div style="width: 60%">
   <sky-file-drop
     labelText="File attachment field"
+    hintText="Really long hint text that should wrap and be confined to below the file drop element. We set the text to have a small margin below the drop and link controls, and if there are any errors (shown below) there will be a slight spacing between this element and those errors."
     [acceptedTypes]="acceptedTypes"
     [allowLinks]="true"
     [maxFileSize]="maxFileSize"

libs/components/forms/src/lib/modules/file-attachment/file-drop.component.html

@@ -29,6 +29,7 @@
           fileUploadAriaLabel ||
           ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)
         "
+        [attr.aria-describedby]="hintText ? hintTextEl.id : undefined"
         [attr.aria-invalid]="!!rejectedFiles.length"
         [attr.aria-errormessage]="
           labelText && rejectedFiles.length ? errorId : undefined
@@ -111,7 +112,7 @@
                 ('skyux_file_attachment_file_upload_link_label'
                   | skyLibResources)
               "
-              [attr.aria-describedby]="hintText.id"
+              [attr.aria-describedby]="uploadHintText.id"
               [attr.aria-invalid]="!!rejectedFiles.length"
               [attr.aria-errormessage]="
                 labelText && rejectedFiles.length ? errorId : undefined
@@ -123,7 +124,7 @@
           </div>
           <div
             skyId
-            #hintText="skyId"
+            #uploadHintText="skyId"
             class="sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm"
           >
             {{
@@ -145,8 +146,14 @@
       </div>
     </div>
   </div>
+  <div skyId #hintTextEl="skyId">
+    <div *ngIf="hintText" class="sky-font-deemphasized sky-file-drop-hint-text">
+      {{ hintText }}
+    </div>
+  </div>
 </fieldset>
 <sky-form-errors
+  class="sky-file-drop-errors"
   [id]="errorId"
   [labelText]="labelText"
   [showErrors]="rejectedFiles.length"

libs/components/forms/src/lib/modules/file-attachment/file-drop.component.scss

@@ -2,7 +2,6 @@
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 
 .sky-file-drop-col {
-  margin-bottom: $sky-margin;
   padding-left: $sky-margin-half;
   padding-right: $sky-margin-half;
   position: relative;
@@ -71,6 +70,7 @@ button.sky-file-drop {
 
 .sky-file-drop-hint-text {
   text-align: left;
+  margin-top: var(--sky-margin-stacked-xs);
 }
 
 .sky-file-drop-accept,
@@ -154,6 +154,10 @@ button.sky-file-drop {
   display: none;
 }
 
+.sky-file-drop-errors {
+  margin-bottom: var(--sky-margin-stacked-lg);
+}
+
 @include mixins.sky-theme-modern {
   .sky-control-label {
     color: var(--sky-text-color-deemphasized);

libs/components/forms/src/lib/modules/file-attachment/file-drop.component.spec.ts

@@ -31,6 +31,11 @@ describe('File drop component', () => {
       declarations: [FileDropContentComponent],
     });
 
+    let uniqueId = 0;
+    spyOn(TestBed.inject(SkyIdService), 'generateId').and.callFake(
+      () => `MOCK_ID_${++uniqueId}`,
+    );
+
     fixture = TestBed.createComponent(SkyFileDropComponent);
     el = fixture.nativeElement;
     componentInstance = fixture.componentInstance;
@@ -39,10 +44,6 @@ describe('File drop component', () => {
       TestBed.inject(SkyLiveAnnouncerService),
       'announce',
     );
-    let uniqueId = 0;
-    spyOn(TestBed.inject(SkyIdService), 'generateId').and.callFake(
-      () => `MOCK_ID_${++uniqueId}`,
-    );
   });
 
   //#region helper functions
@@ -66,6 +67,10 @@ describe('File drop component', () => {
     return el.querySelector('.sky-file-drop-col');
   }
 
+  function getHintEl(): HTMLElement | null {
+    return el.querySelector('.sky-file-drop-hint-text');
+  }
+
   function validateDropClasses(
     hasAccept: boolean,
     hasReject: boolean,
@@ -386,6 +391,21 @@ describe('File drop component', () => {
     expect(labelEl).toHaveCssClass('sky-screen-reader-only');
   });
 
+  it('should render the hintText when provided', () => {
+    const hintText = 'Hint text';
+    componentInstance.hintText = hintText;
+    fixture.detectChanges();
+
+    const hintEl = getHintEl();
+    const dropEl = getDropDebugEl();
+
+    expect(hintEl).not.toBeNull();
+    expect(hintEl?.innerText.trim()).toBe(hintText);
+    expect(
+      dropEl?.nativeElement.attributes.getNamedItem('aria-describedby').value,
+    ).toBe('MOCK_ID_3');
+  });
+
   it('should display built in validation errors automatically when labelText is set', () => {
     componentInstance.labelText = 'Label';
 
@@ -1221,7 +1241,7 @@ describe('File drop component', () => {
 
     expect(
       linkInput.nativeElement.attributes.getNamedItem('aria-describedby').value,
-    ).toBe('MOCK_ID_1');
+    ).toBe('MOCK_ID_4');
   });
 
   it('should pass accessibility', async () => {

libs/components/forms/src/lib/modules/file-attachment/file-drop.component.ts

@@ -156,6 +156,14 @@ export class SkyFileDropComponent implements OnDestroy {
   @Input({ transform: booleanAttribute })
   public labelHidden = false;
 
+  /**
+   * [Persistent inline help text](https://developer.blackbaud.com/skyux/design/guidelines/user-assistance#inline-help) that provides
+   * additional context to the user.
+   * @preview
+   */
+  @Input()
+  public hintText: string | undefined;
+
   @ViewChild('fileInput')
   public inputEl: ElementRef | undefined;