feat(components/pages): add option for click event from needs attention items (#496)

* feat(components/pages): add option for click event from needs attention items

* Updates based on feedback

Author: johnhwhite

apps/playground/src/app/components/pages/action-hub/settings/settings.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SkyModalService } from '@skyux/modals';
 import {
   SkyActionHubNeedsAttention,
   SkyPageLink,
@@ -16,7 +17,7 @@ export class SettingsComponent {
   public settingsLinks: SkyPageModalLink[] = [];
   public needsAttention: SkyActionHubNeedsAttention[];
 
-  constructor() {
+  constructor(private modalService: SkyModalService) {
     ['Back', 'Home'].forEach((label) => {
       this.relatedLinks.push({
         label,
@@ -81,6 +82,22 @@ export class SettingsComponent {
           url: '#',
         },
       },
+      {
+        title: 'Click to open a modal',
+        click: () => {
+          this.modalService.open(SettingsModalComponent, {
+            providers: [
+              { provide: 'modalTitle', useValue: 'Click event modal' },
+            ],
+          });
+        },
+      },
+      {
+        title: 'Click to show alert',
+        click: () => {
+          alert('Click event alert');
+        },
+      },
     ];
   }
 }

libs/components/pages/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/modules/action-hub/action-hub.module';
 export * from './lib/modules/action-hub/types/action-hub-needs-attention';
+export * from './lib/modules/action-hub/types/action-hub-needs-attention-click-handler';
 export * from './lib/modules/action-hub/types/page-link';
 export * from './lib/modules/action-hub/types/page-links-input';
 export * from './lib/modules/action-hub/types/page-modal-link';

libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention-click-handler.ts

@@ -0,0 +1,7 @@
+export type SkyActionHubNeedsAttentionClickHandler = (
+  _: SkyActionHubNeedsAttentionClickHandlerArgs
+) => void;
+
+export type SkyActionHubNeedsAttentionClickHandlerArgs = {
+  item: unknown;
+};

libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention.ts

@@ -1,5 +1,7 @@
 import { NavigationExtras } from '@angular/router';
 
+import { SkyActionHubNeedsAttentionClickHandler } from './action-hub-needs-attention-click-handler';
+
 /**
  * Specifies action items that require attention and directs users to pages
  * where they can resolve them.
@@ -16,11 +18,15 @@ export interface SkyActionHubNeedsAttention {
   /**
    * Specifies a link to resolve the action item.
    */
-  permalink: {
+  permalink?: {
     route?: {
       commands: any[];
       extras?: NavigationExtras;
     };
     url?: string;
   };
+  /**
+   * Specifies a click handler for the action item.
+   */
+  click?: SkyActionHubNeedsAttentionClickHandler;
 }

libs/components/pages/src/lib/modules/link-as/link-as.pipe.spec.ts

@@ -7,17 +7,57 @@ describe('LinkAsPipe', () => {
     expect(pipe.transform(undefined, undefined)).toBeFalsy();
   });
 
-  it('should validate when linkAs is href', () => {
+  it('should validate when linkAs is button', () => {
     const pipe = new LinkAsPipe();
     expect(
       pipe.transform(
-        { label: 'Link', permalink: { url: 'https://www.example.com' } },
-        'href'
+        {
+          title: 'Action',
+          click: () => {
+            [1].pop();
+          },
+        },
+        'button'
+      )
+    ).toBeTruthy();
+    expect(
+      pipe.transform(
+        {
+          title: 'Action',
+          permalink: { url: 'https://www.example.com' },
+          click: () => {
+            [1].pop();
+          },
+        },
+        'button'
       )
     ).toBeFalsy();
     expect(
       pipe.transform(
-        { label: 'Link', permalink: { url: '1bb-nav://spa/path' } },
+        { title: 'Action', permalink: { url: 'https://www.example.com' } },
+        'button'
+      )
+    ).toBeFalsy();
+    expect(
+      pipe.transform(
+        { title: 'Action', permalink: { route: { commands: ['test'] } } },
+        'button'
+      )
+    ).toBeFalsy();
+    expect(
+      pipe.transform({ title: 'Action', permalink: { url: '' } }, 'button')
+    ).toBeFalsy();
+    expect(pipe.transform(undefined, 'button')).toBeFalsy();
+    expect(
+      pipe.transform({ label: 'Link', permalink: { url: 'invalid' } }, 'button')
+    ).toBeFalsy();
+  });
+
+  it('should validate when linkAs is href', () => {
+    const pipe = new LinkAsPipe();
+    expect(
+      pipe.transform(
+        { label: 'Link', permalink: { url: 'https://www.example.com' } },
         'href'
       )
     ).toBeFalsy();

libs/components/pages/src/lib/modules/link-as/link-as.pipe.ts

@@ -9,9 +9,14 @@ import { SkyPageLink } from '../action-hub/types/page-link';
 export class LinkAsPipe implements PipeTransform {
   public transform(
     value: SkyActionHubNeedsAttention | SkyPageLink | undefined,
-    linkAs: 'href' | 'skyHref' | 'skyAppLink'
+    linkAs: 'button' | 'href' | 'skyHref' | 'skyAppLink'
   ): boolean {
     switch (linkAs) {
+      case 'button':
+        return (
+          (value as SkyActionHubNeedsAttention)?.click !== undefined &&
+          value.permalink === undefined
+        );
       case 'href':
         return (
           value?.permalink !== undefined &&

libs/components/pages/src/lib/modules/needs-attention/needs-attention.component.html

@@ -73,6 +73,17 @@ <h2 class="sky-font-heading-2">
         >
           <ng-container *ngTemplateOutlet="link"></ng-container>
         </a>
+        <button
+          *ngIf="item | linkAs: 'button'"
+          class="sky-needs-attention-item sky-padding-vertical-lg sky-btn sky-btn-link-inline"
+          [ngClass]="{
+            'sky-border-bottom-row': !isLast
+          }"
+          type="button"
+          (click)="item.click({item})"
+        >
+          <ng-container *ngTemplateOutlet="link"></ng-container>
+        </button>
       </sky-column>
     </sky-row>
   </sky-fluid-grid>

libs/components/pages/src/lib/modules/needs-attention/needs-attention.component.scss

@@ -9,6 +9,9 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
+  text-align: left;
+  width: 100%;
+  white-space: normal;
 
   &-icon {
     color: $sky-theme-modern-font-deemphasized-color;
@@ -34,3 +37,7 @@
     }
   }
 }
+
+button.sky-needs-attention-item.sky-border-bottom-row {
+  @include sky-border(row, bottom);
+}