Merge remote-tracking branch 'origin/main' into recently-accessed-lis…

…t-component # By John White (1) and Steve Brush (1) # Via GitHub * origin/main: feat(components/pages): add `sky-link-list` component (#2784) feat(components/forms): add `linkUploadHintText` input to the file drop component (#2796) # Conflicts: # apps/code-examples/src/app/code-examples/pages/page/record-page-blocks-layout-demo/demo.component.html # libs/components/pages/src/index.ts # libs/components/pages/src/lib/modules/link-list/link-list.component.ts # libs/components/pages/src/lib/modules/link-list/link-list.module.ts # libs/components/pages/src/lib/modules/page/page.module.ts
blackbaud · Oct 4, 2024 · 2432acb · 2432acb
2 parents 4c4dd50 + 537ef63
commit 2432acb
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 52 deletions.
diff --git a/apps/code-examples/src/app/code-examples/forms/file-drop/basic/demo.component.html b/apps/code-examples/src/app/code-examples/forms/file-drop/basic/demo.component.html
@@ -1,4 +1,5 @@
 <sky-file-drop
+  linkUploadHintText="Start with http:// or https://"
   [acceptedTypes]="acceptedTypes"
   [allowLinks]="true"
   [hintText]="hintText"

diff --git a/apps/e2e/forms-storybook/src/app/file-attachment/file-attachment.component.html b/apps/e2e/forms-storybook/src/app/file-attachment/file-attachment.component.html
@@ -2,13 +2,14 @@
   <sky-file-drop
     helpPopoverContent="Help content"
     helpPopoverTitle="Help title"
-    labelText="File attachment"
     hintText="File attachment hint text"
+    labelText="File attachment"
+    linkUploadHintText="Start with http:// or https://"
     [acceptedTypes]="acceptedTypes"
-    [required]="required"
-    (filesChanged)="filesUpdated($event)"
     [allowLinks]="true"
+    [required]="required"
     [stacked]="true"
+    (filesChanged)="filesUpdated($event)"
   >
   </sky-file-drop>
 
@@ -21,10 +22,11 @@
   <label class="sky-control-label"> File attachment with old inline help</label>
   <sky-help-inline class="sky-control-help"></sky-help-inline>
   <sky-file-drop
+    linkUploadHintText="Start with http:// or https://"
     [acceptedTypes]="acceptedTypes"
     [allowLinks]="true"
-    (filesChanged)="filesUpdated($event)"
     [stacked]="true"
+    (filesChanged)="filesUpdated($event)"
   >
   </sky-file-drop>
 

diff --git a/apps/playground/src/app/components/forms/file-attachment/file-attachment.component.html b/apps/playground/src/app/components/forms/file-attachment/file-attachment.component.html
@@ -1,24 +1,23 @@
-<div style="width: 60%">
-  <sky-file-drop
-    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."
-    labelText="File attachment field"
-    helpKey="help.html"
-    [acceptedTypes]="acceptedTypes"
-    [allowLinks]="true"
-    [maxFileSize]="maxFileSize"
-    [minFileSize]="minFileSize"
-    [required]="required"
-    [validateFn]="validateFile"
-    [stacked]="true"
-    (filesChanged)="filesUpdated($event)"
-    (linkChanged)="linkAdded($event)"
-  />
-  @for (file of allItems; track file) {
-    <div>
-      <sky-file-item [fileItem]="file" (deleteFile)="deleteFile($event)" />
-    </div>
-  }
-</div>
+<sky-file-drop
+  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."
+  labelText="File attachment field"
+  linkUploadHintText="Start with http:// or https://"
+  helpKey="help.html"
+  [acceptedTypes]="acceptedTypes"
+  [allowLinks]="true"
+  [maxFileSize]="maxFileSize"
+  [minFileSize]="minFileSize"
+  [required]="required"
+  [validateFn]="validateFile"
+  [stacked]="true"
+  (filesChanged)="filesUpdated($event)"
+  (linkChanged)="linkAdded($event)"
+/>
+@for (file of allItems; track file) {
+  <div>
+    <sky-file-item [fileItem]="file" (deleteFile)="deleteFile($event)" />
+  </div>
+}
 
 <form [formGroup]="formGroup">
   <sky-file-attachment

diff --git a/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.html b/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.html
@@ -42,4 +42,15 @@
       </sky-row>
     </sky-fluid-grid>
   </sky-page-content>
+  <sky-page-links>
+    <sky-link-list
+      headingText="Related links"
+      [links]="linksLoading()"
+      (click)="linksLoading.set(linksLoading() ? undefined : 'loading')"
+    >
+      <sky-link-list-item>
+        <a href="/">Components</a>
+      </sky-link-list-item>
+    </sky-link-list>
+  </sky-page-links>
 </sky-page>
diff --git a/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.ts b/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
 import { SkyPageModule } from '@skyux/pages';
 
@@ -8,4 +8,6 @@ import { SkyPageModule } from '@skyux/pages';
   templateUrl: './blocks-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class BlocksPageComponent {}
+export default class BlocksPageComponent {
+  protected readonly linksLoading = signal<'loading' | undefined>(undefined);
+}
diff --git a/libs/components/forms/src/assets/locales/resources_en_US.json b/libs/components/forms/src/assets/locales/resources_en_US.json
@@ -155,10 +155,6 @@
     "_description": "Label for input to link to a file",
     "message": "Link to a file"
   },
-  "skyux_file_attachment_file_upload_link_placeholder": {
-    "_description": "",
-    "message": "Start with http:// or https://"
-  },
   "skyux_file_attachment_file_upload_or_click_to_browse": {
     "_description": "",
     "message": "or click to browse"

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-drop/file-drop.component.html b/libs/components/forms/src/lib/modules/file-attachment/file-drop/file-drop.component.html
@@ -127,16 +127,14 @@
                 }}
               </div>
             </div>
-            <div class="sky-margin-stacked-xs">
+            <sky-input-box stacked [hintText]="linkUploadHintText">
               <input
                 type="text"
-                class="sky-form-control"
                 [attr.aria-label]="
                   linkUploadAriaLabel ||
                   ('skyux_file_attachment_file_upload_link_label'
                     | skyLibResources)
                 "
-                [attr.aria-describedby]="uploadHintText.id"
                 [attr.aria-invalid]="!!rejectedFiles.length"
                 [attr.aria-errormessage]="
                   labelText && rejectedFiles.length ? errorId : undefined
@@ -145,17 +143,7 @@
                 (blur)="onLinkBlur()"
                 (keyup)="addLinkEnter($event)"
               />
-            </div>
-            <div
-              #uploadHintText="skyId"
-              skyId
-              class="sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm"
-            >
-              {{
-                'skyux_file_attachment_file_upload_link_placeholder'
-                  | skyLibResources
-              }}
-            </div>
+            </sky-input-box>
             <button
               type="button"
               class="sky-btn sky-btn-primary"

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-drop/file-drop.component.spec.ts b/libs/components/forms/src/lib/modules/file-attachment/file-drop/file-drop.component.spec.ts
@@ -1256,15 +1256,21 @@ describe('File drop component', () => {
     );
   });
 
-  it('should set aria-describedby for the link input', () => {
+  it('should set hint text for the link input', async () => {
+    const linkUploadHintText = 'Hello, world!';
+
     componentInstance.allowLinks = true;
+    componentInstance.linkUploadHintText = linkUploadHintText;
     fixture.detectChanges();
 
     const linkInput = getLinkInput();
 
+    const ariaDescribedby =
+      linkInput.nativeElement.attributes.getNamedItem('aria-describedby').value;
+
     expect(
-      linkInput.nativeElement.attributes.getNamedItem('aria-describedby').value,
-    ).toBe('MOCK_ID_4');
+      document.getElementById(ariaDescribedby)?.textContent?.trim(),
+    ).toEqual(linkUploadHintText);
   });
 
   it('should not have required class and aria-required attribute and label should not have screen reader text when not required', () => {

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-drop/file-drop.component.ts b/libs/components/forms/src/lib/modules/file-attachment/file-drop/file-drop.component.ts
@@ -24,6 +24,7 @@ import { take } from 'rxjs/operators';
 import { SkyFormErrorComponent } from '../../form-error/form-error.component';
 import { SKY_FORM_ERRORS_ENABLED } from '../../form-error/form-errors-enabled-token';
 import { SkyFormErrorsComponent } from '../../form-error/form-errors.component';
+import { SkyInputBoxModule } from '../../input-box/input-box.module';
 import { SkyFormsResourcesModule } from '../../shared/sky-forms-resources.module';
 import { SkyFileAttachmentService } from '../file-attachment/file-attachment.service';
 import { SkyFileItem } from '../shared/file-item';
@@ -65,6 +66,7 @@ const MIN_FILE_SIZE_DEFAULT = 0;
     SkyHelpInlineModule,
     SkyIconModule,
     SkyIdModule,
+    SkyInputBoxModule,
   ],
 })
 export class SkyFileDropComponent implements OnDestroy {
@@ -104,6 +106,12 @@ export class SkyFileDropComponent implements OnDestroy {
   @Input()
   public linkUploadAriaLabel: string | undefined;
 
+  /**
+   * The hint text for the link upload input.
+   */
+  @Input()
+  public linkUploadHintText: string | undefined;
+
   /**
    * The minimum size in bytes for valid files.
    * @default 0

diff --git a/libs/components/forms/src/lib/modules/input-box/input-box.component.scss b/libs/components/forms/src/lib/modules/input-box/input-box.component.scss
@@ -119,6 +119,7 @@ sky-input-box {
   .sky-input-box-hint-text {
     flex-basis: 100%;
     margin-top: var(--sky-margin-stacked-xs);
+    text-align: left;
 
     &.sky-input-box-hint-text-hidden {
       visibility: hidden;

diff --git a/libs/components/forms/src/lib/modules/shared/sky-forms-resources.module.ts b/libs/components/forms/src/lib/modules/shared/sky-forms-resources.module.ts
@@ -99,9 +99,6 @@ const RESOURCES: Record<string, SkyLibResources> = {
       message: 'This file type is invalid',
     },
     skyux_file_attachment_file_upload_link_label: { message: 'Link to a file' },
-    skyux_file_attachment_file_upload_link_placeholder: {
-      message: 'Start with http:// or https://',
-    },
     skyux_file_attachment_file_upload_or_click_to_browse: {
       message: 'or click to browse',
     },

diff --git a/libs/components/pages/src/lib/modules/link-list/link-list.component.ts b/libs/components/pages/src/lib/modules/link-list/link-list.component.ts
@@ -27,7 +27,14 @@ import { SkyLinkListItemComponent } from './link-list-item.component';
   ],
 })
 export class SkyLinkListComponent {
+  /**
+   * The text to display as the list's heading.
+   */
   public readonly headingText = input<string>();
+
+  /**
+   * Option to pass links as an array of `SkyPageLink` objects or `'loading'` to display a loading indicator.
+   */
   public readonly links = input<SkyPageLinksInput | undefined>();
 
   protected readonly linkItems = contentChildren(SkyLinkListItemComponent);

diff --git a/libs/sdk/testing/src/lib/matchers/matchers.ts b/libs/sdk/testing/src/lib/matchers/matchers.ts
@@ -729,6 +729,8 @@ export function expect<T>(actual: T): SkyMatchers<T> {
  * Create an async expectation for a spec.
  * @param actual Actual computed value to test expectations against.
  */
-export function expectAsync<T, U>(actual: T): SkyAsyncMatchers<T, U> {
+export function expectAsync<T, U>(
+  actual: T | PromiseLike<T>,
+): SkyAsyncMatchers<T, U> {
   return windowRef.expectAsync(actual);
 }