From 57ee0e95855887e10034232f587be2e666c96414 Mon Sep 17 00:00:00 2001
From: Kelsey Johnson <35350751+kjohn1922@users.noreply.github.com>
Date: Wed, 8 Nov 2023 09:49:47 -0600
Subject: [PATCH] Add Angular support for the nimble-card (#1646)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

Add Angular support for the `nimble-card` component.

See #296 and the [`nimble-card`
spec](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/card/specs/README.md)
for more information.

## 🤨 Rationale

We want to be able to use the `nimble-card` in Angular applications.

## 👩‍💻 Implementation

- Add and export a new Angular directive and module for the
`nimble-card` component
- Update the component status table to "incubating" for Angular support

## 🧪 Testing

- Added a basic unit test
- Added an example to example-client-app:

![image](https://github.com/ni/nimble/assets/35350751/57827bf5-91dd-4654-98a6-053900aba046)

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: mollykreis <20542556+mollykreis@users.noreply.github.com>
Co-authored-by: Milan Raj <rajsite@users.noreply.github.com>
---
 .../example-client-app/src/app/app.module.ts     |  2 ++
 .../src/app/customapp/customapp.component.html   | 13 +++++++++++++
 .../ni/nimble-angular/card/ng-package.json       |  6 ++++++
 .../nimble-angular/card/nimble-card.directive.ts | 13 +++++++++++++
 .../ni/nimble-angular/card/nimble-card.module.ts | 12 ++++++++++++
 .../ni/nimble-angular/card/public-api.ts         |  2 ++
 .../card/tests/card.directive.spec.ts            | 16 ++++++++++++++++
 ...lar-fb64a60a-b575-4965-bea7-df33b3911b9f.json |  7 +++++++
 ...nts-258183d7-7c0f-4208-978c-61b6089e7796.json |  7 +++++++
 packages/nimble-components/src/card/styles.ts    |  2 +-
 packages/nimble-components/src/card/template.ts  |  5 ++++-
 .../src/tests/component-status.stories.ts        |  2 +-
 12 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 angular-workspace/projects/ni/nimble-angular/card/ng-package.json
 create mode 100644 angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts
 create mode 100644 angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts
 create mode 100644 angular-workspace/projects/ni/nimble-angular/card/public-api.ts
 create mode 100644 angular-workspace/projects/ni/nimble-angular/card/tests/card.directive.spec.ts
 create mode 100644 change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json
 create mode 100644 change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json

diff --git a/angular-workspace/projects/example-client-app/src/app/app.module.ts b/angular-workspace/projects/example-client-app/src/app/app.module.ts
index c47bb4a6ac..02576aa770 100644
--- a/angular-workspace/projects/example-client-app/src/app/app.module.ts
+++ b/angular-workspace/projects/example-client-app/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
     NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule,
     NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule,
     NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular';
+import { NimbleCardModule } from '@ni/nimble-angular/card';
 import { NimbleLabelProviderCoreModule } from '@ni/nimble-angular/label-provider/core';
 import { NimbleLabelProviderRichTextModule } from '@ni/nimble-angular/label-provider/rich-text';
 import { NimbleLabelProviderTableModule } from '@ni/nimble-angular/label-provider/table';
@@ -72,6 +73,7 @@ import { HeaderComponent } from './header/header.component';
         NimbleComboboxModule,
         NimbleMenuButtonModule,
         NimbleTooltipModule,
+        NimbleCardModule,
         NimbleCardButtonModule,
         NimbleDialogModule,
         NimbleRadioGroupModule,
diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
index b0353614f1..e147b09981 100644
--- a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
+++ b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
@@ -42,6 +42,19 @@
             <nimble-anchor-button nimbleRouterLink="/customapp" appearance="block">Block Anchor Button</nimble-anchor-button>
             <nimble-anchor-button nimbleRouterLink="/customapp" appearance="ghost">Ghost Anchor Button</nimble-anchor-button>
         </div>
+        <div class="sub-container">
+            <div class="container-label">Card</div>
+            <nimble-card>
+                <span slot="title">Title of the card</span>
+                <nimble-number-field>Numeric field 1</nimble-number-field>
+                <nimble-number-field>Numeric field 2</nimble-number-field>
+                <nimble-select>
+                    <nimble-list-option value="1">Option 1</nimble-list-option>
+                    <nimble-list-option value="2">Option 2</nimble-list-option>
+                    <nimble-list-option value="3">Option 3</nimble-list-option>
+                </nimble-select>
+            </nimble-card>
+        </div>
         <div class="sub-container">
             <div class="container-label">Card Button</div>
             <nimble-card-button>
diff --git a/angular-workspace/projects/ni/nimble-angular/card/ng-package.json b/angular-workspace/projects/ni/nimble-angular/card/ng-package.json
new file mode 100644
index 0000000000..90febd7fae
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}
diff --git a/angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts
new file mode 100644
index 0000000000..365a6f99c6
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts
@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { type Card, cardTag } from '@ni/nimble-components/dist/esm/card';
+
+export type { Card };
+export { cardTag };
+
+/**
+ * Directive to provide Angular integration for the card.
+ */
+@Directive({
+    selector: 'nimble-card'
+})
+export class NimbleCardDirective { }
diff --git a/angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts
new file mode 100644
index 0000000000..7b37f52c08
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NimbleCardDirective } from './nimble-card.directive';
+
+import '@ni/nimble-components/dist/esm/card';
+
+@NgModule({
+    declarations: [NimbleCardDirective],
+    imports: [CommonModule],
+    exports: [NimbleCardDirective]
+})
+export class NimbleCardModule { }
diff --git a/angular-workspace/projects/ni/nimble-angular/card/public-api.ts b/angular-workspace/projects/ni/nimble-angular/card/public-api.ts
new file mode 100644
index 0000000000..99d8f624d9
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/public-api.ts
@@ -0,0 +1,2 @@
+export * from './nimble-card.directive';
+export * from './nimble-card.module';
diff --git a/angular-workspace/projects/ni/nimble-angular/card/tests/card.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/card/tests/card.directive.spec.ts
new file mode 100644
index 0000000000..f10eaada17
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/tests/card.directive.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { NimbleCardModule } from '../nimble-card.module';
+
+describe('Nimble card', () => {
+    describe('module', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [NimbleCardModule]
+            });
+        });
+
+        it('custom element is defined', () => {
+            expect(customElements.get('nimble-card')).not.toBeUndefined();
+        });
+    });
+});
diff --git a/change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json b/change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json
new file mode 100644
index 0000000000..0d3688b73e
--- /dev/null
+++ b/change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add Angular support for the nimble-card component",
+  "packageName": "@ni/nimble-angular",
+  "email": "35350751+kjohn1922@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json b/change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json
new file mode 100644
index 0000000000..0700740a81
--- /dev/null
+++ b/change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Workaround for Lighthouse accessibility error in nimble-card. Update Angular status of nimble-card component.",
+  "packageName": "@ni/nimble-components",
+  "email": "35350751+kjohn1922@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/card/styles.ts b/packages/nimble-components/src/card/styles.ts
index 03ede1b905..f7f394c0f1 100644
--- a/packages/nimble-components/src/card/styles.ts
+++ b/packages/nimble-components/src/card/styles.ts
@@ -28,7 +28,7 @@ export const styles = css`
         display: contents;
     }
 
-    ::slotted([slot='title']) {
+    slot[name='title'] {
         font: ${titleFont};
         color: ${titleFontColor};
     }
diff --git a/packages/nimble-components/src/card/template.ts b/packages/nimble-components/src/card/template.ts
index 9969efbd43..d36213099a 100644
--- a/packages/nimble-components/src/card/template.ts
+++ b/packages/nimble-components/src/card/template.ts
@@ -2,7 +2,10 @@ import { html } from '@microsoft/fast-element';
 import type { Card } from '.';
 
 export const template = html<Card>`
-    <section aria-labelledby="title-slot">
+    ${
+    '' /* Explicitly set role to work around Lighthouse error. See https://github.com/ni/nimble/issues/1650. */
+}
+    <section role="region" aria-labelledby="title-slot">
         <slot name="title" id="title-slot"></slot>
         <slot></slot>
     </section>
diff --git a/packages/nimble-components/src/tests/component-status.stories.ts b/packages/nimble-components/src/tests/component-status.stories.ts
index 31b64c4dff..0994c32b61 100644
--- a/packages/nimble-components/src/tests/component-status.stories.ts
+++ b/packages/nimble-components/src/tests/component-status.stories.ts
@@ -114,7 +114,7 @@ const components = [
         issueHref: 'https://github.com/ni/nimble/issues/296',
         issueLabel: 'Issue',
         componentStatus: ComponentFrameworkStatus.incubating,
-        angularStatus: ComponentFrameworkStatus.doesNotExist,
+        angularStatus: ComponentFrameworkStatus.incubating,
         blazorStatus: ComponentFrameworkStatus.incubating
     },
     {