feat(components/pages): add sky-link-list component (#2784)

[AB#3033904](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3033904) [AB#3033919](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3033919)
blackbaud · Oct 4, 2024 · 537ef63 · 537ef63
1 parent 9f5e268
commit 537ef63
Show file tree

Hide file tree

Showing 31 changed files with 385 additions and 61 deletions.
diff --git a/...mples/src/app/code-examples/pages/page/record-page-blocks-layout-demo/demo.component.html b/...mples/src/app/code-examples/pages/page/record-page-blocks-layout-demo/demo.component.html
@@ -13,4 +13,17 @@
   <sky-page-content>
     <app-record-page-content />
   </sky-page-content>
+  <sky-page-links>
+    <sky-link-list headingText="Related links">
+      <sky-link-list-item>
+        <a href="#">Analysis</a>
+      </sky-link-list-item>
+      <sky-link-list-item>
+        <a href="#">Tools</a>
+      </sky-link-list-item>
+      <sky-link-list-item>
+        <button type="button" class="sky-btn-link-inline">Settings</button>
+      </sky-link-list-item>
+    </sky-link-list>
+  </sky-page-links>
 </sky-page>
diff --git a/apps/e2e/pages-storybook/src/app/app.module.ts b/apps/e2e/pages-storybook/src/app/app.module.ts
@@ -1,10 +1,16 @@
 import { NgModule } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Route, RouterModule } from '@angular/router';
+import { provideInitialTheme } from '@skyux/theme';
 
 import { AppComponent } from './app.component';
 
 const routes: Route[] = [
+  {
+    path: '',
+    redirectTo: '/page/layouts/blocks-with-links',
+    pathMatch: 'full',
+  },
   {
     path: 'action-hub',
     loadChildren: () =>
@@ -28,6 +34,7 @@ if (routes.length > 0 && routes.findIndex((r) => r.path === '') === -1) {
       bindToComponentInputs: true,
     }),
   ],
+  providers: [provideInitialTheme('modern')],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.html b/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.html
@@ -93,6 +93,6 @@
     </sky-fluid-grid>
   </sky-page-content>
   @if (showLinks()) {
-    <sky-page-links>Links.</sky-page-links>
+    <sky-page-links><app-links /></sky-page-links>
   }
 </sky-page>
diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.ts b/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.ts
@@ -6,6 +6,8 @@ import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
 import { SkyPageModule } from '@skyux/pages';
 import { SkyDropdownModule } from '@skyux/popovers';
 
+import { LinksComponent } from '../../../shared/links/links.component';
+
 @Component({
   selector: 'app-blocks-page',
   standalone: true,
@@ -18,6 +20,7 @@ import { SkyDropdownModule } from '@skyux/popovers';
     SkyFluidGridModule,
     SkyLabelModule,
     SkyPageModule,
+    LinksComponent,
   ],
   templateUrl: './blocks-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/fit-page/fit-page.component.html b/apps/e2e/pages-storybook/src/app/page/layouts/fit-page/fit-page.component.html
@@ -120,6 +120,6 @@
     </sky-split-view>
   </sky-page-content>
   @if (showLinks()) {
-    <sky-page-links>Links.</sky-page-links>
+    <sky-page-links><app-links /></sky-page-links>
   }
 </sky-page>
diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/fit-page/fit-page.component.ts b/apps/e2e/pages-storybook/src/app/page/layouts/fit-page/fit-page.component.ts
@@ -22,6 +22,8 @@ import {
 
 import { Subject } from 'rxjs';
 
+import { LinksComponent } from '../../../shared/links/links.component';
+
 interface WorkspaceItem {
   id: number;
   amount: number;
@@ -46,6 +48,7 @@ interface WorkspaceItem {
     SkyRepeaterModule,
     SkySplitViewModule,
     SkySummaryActionBarModule,
+    LinksComponent,
   ],
   templateUrl: './fit-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/list-page/list-page.component.html b/apps/e2e/pages-storybook/src/app/page/layouts/list-page/list-page.component.html
@@ -6,6 +6,6 @@
   </sky-page-header>
   <sky-page-content class="sky-border-dark">List content</sky-page-content>
   @if (showLinks()) {
-    <sky-page-links>Links.</sky-page-links>
+    <sky-page-links><app-links /></sky-page-links>
   }
 </sky-page>
diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/list-page/list-page.component.ts b/apps/e2e/pages-storybook/src/app/page/layouts/list-page/list-page.component.ts
@@ -2,10 +2,12 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { SkyPageModule } from '@skyux/pages';
 
+import { LinksComponent } from '../../../shared/links/links.component';
+
 @Component({
   selector: 'app-list-page',
   standalone: true,
-  imports: [CommonModule, SkyPageModule],
+  imports: [CommonModule, SkyPageModule, LinksComponent],
   templateUrl: './list-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/tabs-page/tabs-page.component.html b/apps/e2e/pages-storybook/src/app/page/layouts/tabs-page/tabs-page.component.html
@@ -18,6 +18,6 @@
     </sky-tabset>
   </sky-page-content>
   @if (showLinks()) {
-    <sky-page-links>Links.</sky-page-links>
+    <sky-page-links><app-links /></sky-page-links>
   }
 </sky-page>
diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/tabs-page/tabs-page.component.ts b/apps/e2e/pages-storybook/src/app/page/layouts/tabs-page/tabs-page.component.ts
@@ -3,10 +3,12 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { SkyPageModule } from '@skyux/pages';
 import { SkyTabsModule } from '@skyux/tabs';
 
+import { LinksComponent } from '../../../shared/links/links.component';
+
 @Component({
   selector: 'app-tabs-page',
   standalone: true,
-  imports: [CommonModule, SkyPageModule, SkyTabsModule],
+  imports: [CommonModule, SkyPageModule, SkyTabsModule, LinksComponent],
   templateUrl: './tabs-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/apps/e2e/pages-storybook/src/app/shared/links/links.component.html b/apps/e2e/pages-storybook/src/app/shared/links/links.component.html
@@ -0,0 +1,14 @@
+<sky-link-list headingText="Links">
+  <sky-link-list-item>
+    <a href="#">Link 1</a>
+  </sky-link-list-item>
+  <sky-link-list-item>
+    <a href="#">Link 2</a>
+  </sky-link-list-item>
+  <sky-link-list-item>
+    <a href="#">Link 3</a>
+  </sky-link-list-item>
+  <sky-link-list-item>
+    <button type="button" class="sky-btn-link-inline">Button</button>
+  </sky-link-list-item>
+</sky-link-list>
diff --git a/apps/e2e/pages-storybook/src/app/shared/links/links.component.ts b/apps/e2e/pages-storybook/src/app/shared/links/links.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { SkyLinkListModule } from '@skyux/pages';
+
+@Component({
+  selector: 'app-links',
+  standalone: true,
+  imports: [SkyLinkListModule],
+  templateUrl: './links.component.html',
+})
+export class LinksComponent {}
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/colorpicker/testing/project.json b/libs/components/colorpicker/testing/project.json
@@ -5,7 +5,15 @@
   "sourceRoot": "libs/components/colorpicker/testing/src",
   "prefix": "sky",
   "tags": ["testing"],
-  "implicitDependencies": ["colorpicker", "testing", "theme"],
+  "implicitDependencies": [
+    "colorpicker",
+    "core-testing",
+    "forms-testing",
+    "help-inline-testing",
+    "icon-testing",
+    "testing",
+    "theme"
+  ],
   "targets": {
     "build": {
       "command": "echo ' 🏗️  build colorpicker-testing'",

diff --git a/libs/components/pages/src/index.ts b/libs/components/pages/src/index.ts
@@ -4,6 +4,7 @@ export {
   SkyActionHubNeedsAttentionClickHandler,
   SkyActionHubNeedsAttentionClickHandlerArgs,
 } from './lib/modules/action-hub/types/action-hub-needs-attention-click-handler';
+export { SkyLinkListModule } from './lib/modules/link-list/link-list.module';
 export { SkyPageLink } from './lib/modules/action-hub/types/page-link';
 export { SkyPageLinksInput } from './lib/modules/action-hub/types/page-links-input';
 export { SkyPageModalLink } from './lib/modules/action-hub/types/page-modal-link';
@@ -19,6 +20,8 @@ export { SkyPageLayoutType } from './lib/modules/page/types/page-layout-type';
 export { SkyActionHubButtonsComponent as λ2 } from './lib/modules/action-hub/action-hub-buttons.component';
 export { SkyActionHubContentComponent as λ3 } from './lib/modules/action-hub/action-hub-content.component';
 export { SkyActionHubComponent as λ1 } from './lib/modules/action-hub/action-hub.component';
+export { SkyLinkListComponent as λ13 } from './lib/modules/link-list/link-list.component';
+export { SkyLinkListItemComponent as λ14 } from './lib/modules/link-list/link-list-item.component';
 export { SkyModalLinkListComponent as λ5 } from './lib/modules/modal-link-list/modal-link-list.component';
 export { SkyPageHeaderActionsComponent as λ9 } from './lib/modules/page-header/page-header-actions.component';
 export { SkyPageHeaderAlertsComponent as λ11 } from './lib/modules/page-header/page-header-alerts.component';

diff --git a/libs/components/pages/src/lib/modules/action-hub/action-hub.component.html b/libs/components/pages/src/lib/modules/action-hub/action-hub.component.html
@@ -24,11 +24,11 @@
     <sky-column [screenLarge]="3" [screenXSmall]="12">
       <sky-link-list
         [links]="relatedLinks | skyActionHubRelatedLinksSort"
-        [title]="'sky_action_hub_related_links' | skyLibResources"
+        [headingText]="'sky_action_hub_related_links' | skyLibResources"
       />
       <sky-link-list
         [links]="recentLinks | skyActionHubRecentLinksResolve"
-        [title]="'sky_action_hub_recent_links' | skyLibResources"
+        [headingText]="'sky_action_hub_recent_links' | skyLibResources"
       />
       <sky-modal-link-list
         [links]="settingsLinks"

diff --git a/libs/components/pages/src/lib/modules/action-hub/action-hub.component.spec.ts b/libs/components/pages/src/lib/modules/action-hub/action-hub.component.spec.ts
@@ -243,9 +243,7 @@ describe('Action hub component', () => {
       expect(fixture.nativeElement.querySelectorAll('.sky-wait').length).toBe(
         0,
       );
-      const recent1 = fixture.nativeElement.querySelector(
-        'sky-link-list[ng-reflect-title="Recently accessed"] a',
-      );
+      const recent1 = fixture.nativeElement.querySelector('sky-link-list a');
       expect(recent1).toHaveText('Recent link');
     }));
 

diff --git a/libs/components/pages/src/lib/modules/link-list/fixtures/link-list-fixture.component.ts b/libs/components/pages/src/lib/modules/link-list/fixtures/link-list-fixture.component.ts
@@ -0,0 +1,26 @@
+import { Component, input } from '@angular/core';
+
+import { SkyPageLinksInput } from '../../action-hub/types/page-links-input';
+import { SkyLinkListModule } from '../link-list.module';
+
+@Component({
+  standalone: true,
+  selector: 'sky-link-list-fixture',
+  template: `
+    <sky-link-list headingText="Heading..." [links]="links()">
+      @if (showLinks()) {
+        <sky-link-list-item>
+          <a href="#">Link 1</a>
+        </sky-link-list-item>
+        <sky-link-list-item>
+          <a href="#">Link 2</a>
+        </sky-link-list-item>
+      }
+    </sky-link-list>
+  `,
+  imports: [SkyLinkListModule],
+})
+export class LinkListFixtureComponent {
+  public readonly links = input<SkyPageLinksInput | undefined>();
+  public readonly showLinks = input<boolean>(false);
+}
diff --git a/libs/components/pages/src/lib/modules/link-list/link-list-item.component.ts b/libs/components/pages/src/lib/modules/link-list/link-list-item.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+/**
+ * A wrapper for each link in a link list.
+ */
+@Component({
+  standalone: true,
+  selector: 'sky-link-list-item',
+  template: `<ng-content />`,
+  styles: `
+    :host {
+      display: block;
+      margin: 0 0 var(--sky-margin-stacked-sm) 0;
+    }
+  `,
+  host: {
+    '[attr.role]': '"listitem"',
+  },
+})
+export class SkyLinkListItemComponent {}
diff --git a/libs/components/pages/src/lib/modules/link-list/link-list.component.html b/libs/components/pages/src/lib/modules/link-list/link-list.component.html
@@ -1,11 +1,11 @@
-<sky-wait [isWaiting]="links === 'loading'" />
-@if (links === 'loading') {
+<sky-wait [isWaiting]="links() === 'loading'" />
+@if (links() === 'loading') {
   <ng-container [ngTemplateOutlet]="headingTemplateRef" />
 } @else {
-  @if (linksArray.length > 0) {
+  @if (hasLinks()) {
     <ng-container [ngTemplateOutlet]="headingTemplateRef" />
     <ul class="sky-link-list">
-      @for (link of linksArray; track link) {
+      @for (link of linksArray(); track link) {
         <li>
           @if (link | linkAs: 'skyHref') {
             <a [skyHref]="link.permalink.url">
@@ -35,12 +35,11 @@
           }
         </li>
       }
+      <ng-content select="sky-link-list-item" />
     </ul>
   }
 }
 
 <ng-template #headingTemplateRef>
-  <h2 class="sky-font-heading-4">
-    {{ title }}
-  </h2>
+  <h2 class="sky-font-heading-4">{{ headingText() }}</h2>
 </ng-template>