Add support for Fluent UI Teaching Bubble

apps/demo/src/app/app.component.html

@@ -257,4 +257,14 @@ <h2>Getting up and running...</h2>
   <fab-people-picker [inputProps]="{placeholder: 'Search for a person'}" [pickerSuggestionsOptions]="{noResultsFoundText: 'No results found', loadingText: 'Loading'}"  [selectedItems]="peoplePickerSelectedItems" (onChange)="updatePeoplePickerSelectedItems($event)" [resolveSuggestions]="peoplePickerInputChanged"></fab-people-picker>
   <div>{{peoplePickerSelectedItems.length}} item(s) selected in the people picker</div>
   <fab-progress-indicator bar-height="4"  [percentComplete]="0.35" description="Progress indicator description" label="Progress indicator label"></fab-progress-indicator>
- </div>
+  <fab-default-button class="calloutTarget" (click)="onOpenCalloutClicked()">Callout target</fab-default-button>
+  <fab-callout target=".calloutTarget" [isBeakVisible]="true" [gapSpace]="0" [doNotLayer]="false" 
+    [hidden]="false" role="alert" [beakWidth]="16" (onDismiss)="onCalloutDismiss()" *ngIf="isCalloutVisible">
+    Callout content
+  </fab-callout>
+  <fab-default-button class="teachingBubbleTarget" (click)="onOpenTeachingBubbleClicked()">Teaching Bubble target</fab-default-button>
+  <fab-teaching-bubble target=".teachingBubbleTarget" [primaryButtonProps]="teachingBubblePrimaryButtonProps" [secondaryButtonProps]="teachingBubbleSecondaryButtonProps" headline="Teaching bubble headline" hasCloseButton={true}
+  closeButtonAriaLabel="Close" (onDismiss)="onTeachingBubbleDismiss()" *ngIf="isTeachingBubbleVisible">
+    Teaching bubble content
+  </fab-teaching-bubble>
+</div>

apps/demo/src/app/app.component.ts

@@ -9,6 +9,9 @@ import {
   ICheckboxProps,
   IPersonaProps,
   IPeoplePickerProps,
+  IButtonProps,
+  BaseButton,
+  Button
 } from 'office-ui-fabric-react';
 import { RenderPropOptions } from '@angular-react/core';
 import { FabDropdownComponent } from '@angular-react/fabric';
@@ -102,6 +105,35 @@ export class AppComponent {
     { field2: 'f2content5' },
   ];
 
+  teachingBubblePrimaryButtonProps: IButtonProps = {
+    children: 'Primary action',
+    onClick: (event:  React.MouseEvent<HTMLButtonElement | HTMLDivElement | HTMLAnchorElement | BaseButton | Button | HTMLSpanElement, MouseEvent>) => alert('Primary action clicked'),
+  };
+
+  teachingBubbleSecondaryButtonProps: IButtonProps = {
+    children: 'Maybe later',
+    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement | HTMLAnchorElement | BaseButton | Button | HTMLSpanElement, MouseEvent>) => alert('Maybe later clicked'),
+  };
+
+  isCalloutVisible = false;
+  isTeachingBubbleVisible = false;
+
+  onOpenCalloutClicked() {
+    this.isCalloutVisible = true;
+  }
+
+  onOpenTeachingBubbleClicked() {
+    this.isTeachingBubbleVisible = true;
+  }
+
+  onCalloutDismiss(event) {
+    this.isCalloutVisible = false;
+  }
+
+  onTeachingBubbleDismiss(event) {
+    this.isTeachingBubbleVisible = false;
+  }
+
   onNewClicked() {
     console.log('New clicked');
   }

apps/demo/src/app/app.module.ts

@@ -36,7 +36,8 @@ import {
   FabTextFieldModule,
   FabPeoplePickerModule,
   FabTagPickerModule,
-  FabProgressIndicatorModule
+  FabProgressIndicatorModule,
+  FabTeachingBubbleModule
 } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
@@ -84,7 +85,8 @@ import { CounterComponent } from './counter/counter.component';
     FabTextFieldModule,
     FabPeoplePickerModule,
     FabTagPickerModule,
-    FabProgressIndicatorModule
+    FabProgressIndicatorModule,
+    FabTeachingBubbleModule
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],

libs/fabric/src/lib/components/teaching-bubble/public-api.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+export * from './teaching-bubble.component';
+export * from './teaching-bubble.module';

libs/fabric/src/lib/components/teaching-bubble/teaching-bubble.component.ts

@@ -0,0 +1,74 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent, JsxRenderFunc, InputRendererOptions } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+  OnInit,
+} from '@angular/core';
+import { ITeachingBubbleProps } from 'office-ui-fabric-react/lib/TeachingBubble';
+
+@Component({
+  selector: 'fab-teaching-bubble',
+  exportAs: 'fabTeachingBubble',
+  template: `
+    <TeachingBubble
+      #reactNode
+      [ariaDescribedBy]="ariaDescribedBy"
+      [ariaLabelledBy]="ariaLabelledBy"
+      [calloutProps]="calloutProps"
+      [componentRef]="componentRef"
+      [footerContent]="footerContent"
+      [hasCloseButton]="hasCloseButton"
+      [hasCondensedHeadline]="hasCondensedHeadline"
+      [hasSmallHeadline]="hasSmallHeadline"
+      [headline]="headline"
+      [illustrationImage]="illustrationImage"
+      [isWide]="isWide"
+      (onDismiss)="onDismiss.emit($event)"
+      [primaryButtonProps]="primaryButtonProps"
+      [secondaryButtonProps]="secondaryButtonProps"
+      [styles]="styles"
+      [target]="target"
+      [theme]="theme"
+    >
+      <ReactContent><ng-content></ng-content></ReactContent>
+    </TeachingBubble>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabTeachingBubbleComponent extends ReactWrapperComponent<ITeachingBubbleProps> {
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+
+  @Input() ariaDescribedBy?: ITeachingBubbleProps['ariaDescribedBy'];
+  @Input() ariaLabelledBy?: ITeachingBubbleProps['ariaLabelledBy'];
+  @Input() calloutProps?: ITeachingBubbleProps['calloutProps'];
+  @Input() componentRef?: ITeachingBubbleProps['componentRef'];
+  @Input() footerContent?: ITeachingBubbleProps['footerContent'];
+  @Input() hasCloseButton?: ITeachingBubbleProps['hasCloseButton'];
+  @Input() hasCondensedHeadline?: ITeachingBubbleProps['hasCondensedHeadline'];
+  @Input() hasSmallHeadline?: ITeachingBubbleProps['hasSmallHeadline'];
+  @Input() headline?: ITeachingBubbleProps['headline'];
+  @Input() illustrationImage?: ITeachingBubbleProps['illustrationImage'];
+  @Input() isWide?: ITeachingBubbleProps['isWide'];
+  @Input() primaryButtonProps?: ITeachingBubbleProps['primaryButtonProps'];
+  @Input() secondaryButtonProps?: ITeachingBubbleProps['secondaryButtonProps'];
+  @Input() styles?: ITeachingBubbleProps['styles'];
+  @Input() target?: ITeachingBubbleProps['target'];
+  @Input() theme?: ITeachingBubbleProps['theme'];
+
+  @Output() readonly onDismiss = new EventEmitter<{ ev?: any }>();
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+}

libs/fabric/src/lib/components/teaching-bubble/teaching-bubble.module.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { TeachingBubble } from 'office-ui-fabric-react';
+import { FabTeachingBubbleComponent } from './teaching-bubble.component';
+
+const components = [FabTeachingBubbleComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabTeachingBubbleModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('TeachingBubble', () => TeachingBubble);
+  }
+}

libs/fabric/src/public-api.ts

@@ -39,3 +39,4 @@ export * from './lib/components/tooltip/public-api';
 export * from './lib/components/nav/public-api';
 export * from './lib/components/pickers/public-api';
 export * from './lib/components/progress-indicator/public-api';
+export * from './lib/components/teaching-bubble/public-api';