feat(copy-updates): align copy component impl with latest designs (#444)

improve tests
fix tooltip flutter
add tooltip for copy buttons
use input element for copy value container
remove redundant triggers
clean up view templates
use obj for storing common values in copyBase

add project flag to tslint script to avoid "rule requires type information" warning
use readonly input instead of span so copy value is scrollable
use tooltipText input prop instead of tooltip to avoid namespace collision
both focus and hover can launch a tooltip
specify body for container attribute to fix tooltip styling issues
avoid breaking changes by setting buttonAriaLabel to buttonLabel value when passed in
update tests to use new property name

Author: seanforyou23

src/app/copy/block-copy/block-copy.component.html

@@ -1,14 +1,15 @@
-<div class="pfng-block-copy">
+<div class="pfng-block-copy" [ngStyle]="{'width': width}">
   <label
     *ngIf="label"
     class="pfng-block-copy-label"
     [attr.for]="buttonId">{{label}}</label>
   <div class="pfng-block-copy-inner-container">
     <div class="pfng-block-copy-preview" [ngClass]="{'pf-is-open': expanded}">
       <button
+        type="button"
         [attr.aria-label]="expandToggleAriaLabel"
         [attr.aria-expanded]="expanded"
-        class="pfng-block-copy-preview-btn"
+        class="btn btn-default pfng-block-copy-preview-btn"
         (click)="togglePanel()">
         <i
           aria-hidden="true"
@@ -17,20 +18,32 @@
       </button>
       <div
         class="pfng-block-copy-preview-txt-cont"
-        placement="{{tooltipPlacement ? tooltipPlacement : null}}"
-        tooltip="{{tooltip ? tooltip : null}}">
-        <span class="pfng-block-copy-preview-txt">{{value}}</span>
+        [placement]="tooltipPlacement"
+        [tooltip]="tooltipText"
+        container="body">
+        <input
+          type="text"
+          tabindex="-1"
+          [value]="value"
+          class="pfng-block-copy-preview-txt"
+          readonly="readonly">
       </div>
       <button
+        type="button"
         [attr.id]="buttonId"
-        class="btn btn-lg btn-default pfng-block-copy-btn"
+        class="btn btn-default pfng-block-copy-btn"
         [attr.aria-label]="buttonAriaLabel"
+        [tooltip]="copyBtnTooltipText"
+        [placement]="copyBtnTooltipPlacement"
+        triggers="hover"
+        container="body"
         (click)="copy()">
         <span>
-          <ng-container *ngIf="!recentlyCopied">{{buttonLabel}}</ng-container>
+          <ng-container *ngIf="!recentlyCopied">
+            <i class="fa fa-clipboard" aria-hidden="true"></i>
+          </ng-container>
           <ng-container *ngIf="recentlyCopied">
             <i class="fa fa-check" aria-hidden="true"></i>
-            Copied
           </ng-container>
         </span>
         </button>

src/app/copy/block-copy/block-copy.component.less

@@ -1,24 +1,24 @@
 .pfng-block-copy {
+  max-width: 100%;
   &-inner-container {
+    background: #fff;
     border: 1px solid #bbb;
   }
   &-preview {
     display: flex;
     &.pf-is-open {
       border-bottom: 1px solid #bbb;
-      background: #ddd;
     }
     &-btn {
-      background: none;
       border: none;
       border-right: 1px solid #bbb;
       padding: 0;
     }
     &-icon {
       cursor: pointer;
-      padding: 0 1em;
+      padding: 0 .679em;
       &.fa-angle-right {
-        padding: 0 1.15em;
+        padding: 0 .822em;
       }
     }
     &-txt-cont {
@@ -33,6 +33,8 @@
       text-overflow: ellipsis;
       margin-right: 1em;
       margin-left: .75em;
+      border: none;
+      width: 100%;
     }
   }
   &-btn {

src/app/copy/block-copy/block-copy.component.spec.ts

@@ -32,7 +32,7 @@ describe('Block Copy component', () => {
       componentConfig = {
         label: 'Block-level Foobar',
         expandToggleAriaLabel: 'Expand Block-level Foobar',
-        tooltip: 'Block Copy Tooltip',
+        tooltipText: 'Block Copy Tooltip',
         value: 'Token'
       };
     })

src/app/copy/block-copy/block-copy.component.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   Input,
+  OnInit,
   ViewEncapsulation
 } from '@angular/core';
 
@@ -35,7 +36,7 @@ import { CopyService } from '../copy-service/copy.service';
   selector: 'pfng-block-copy',
   templateUrl: './block-copy.component.html'
 })
-export class BlockCopyComponent extends CopyBase {
+export class BlockCopyComponent extends CopyBase implements OnInit {
   /**
    * Label output above the block copy component
    */
@@ -68,6 +69,12 @@ export class BlockCopyComponent extends CopyBase {
     super(copyService);
   }
 
+  ngOnInit() {
+    if (!this.buttonAriaLabel && this.buttonLabel) {
+      this.buttonAriaLabel = this.buttonLabel;
+    }
+  }
+
   /**
    * Generates a unique ID for the button
    */

src/app/copy/block-copy/example/block-copy-basic-example.component.html

@@ -3,19 +3,18 @@
     <div class="col-sm-8 padding-bottom-15">
       <p>This basic example illustrates how you can control various bits of text within the component. Block copy is not intended for use with small strings of text.</p>
       <pfng-block-copy
-        [buttonAriaLabel]="basicEx01.buttonAriaLabel"
-        [buttonLabel]="basicEx01.buttonLabel"
+      [buttonAriaLabel]="basicEx01.buttonAriaLabel"
         [expandToggleAriaLabel]="basicEx01.expandToggleAriaLabel"
         [label]="basicEx01.label"
-        [tooltip]="basicEx01.tooltip"
+        [tooltipText]="basicEx01.tooltip"
         [value]="basicEx01.value"
         (onCopy)="handleCopy($event)"></pfng-block-copy>
     </div>
   </div>
   <div class="row padding-top-10">
     <div class="col-sm-12">
       <h4 class="actions-label">Actions</h4>
-      <hr/>
+      <hr>
     </div>
   </div>
   <div class="row">

src/app/copy/block-copy/example/block-copy-basic-example.component.ts

@@ -3,8 +3,7 @@ import {
   OnInit,
   ViewEncapsulation
 } from '@angular/core';
-import {CopyEvent} from '../../copy-event';
-import {NotificationType} from '../../../notification/notification-type';
+import { CopyEvent } from '../../copy-event';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -14,7 +13,6 @@ import {NotificationType} from '../../../notification/notification-type';
 export class BlockCopyBasicExampleComponent implements OnInit {
   actionsText: string = '';
   basicEx01 = {
-    buttonLabel: 'Copy JSON',
     buttonAriaLabel: 'Copy Swagger JSON',
     expandToggleAriaLabel: 'Toggle Swagger JSON',
     label: 'Swagger JSON',

src/app/copy/block-copy/example/block-copy-expanded-example.component.html

@@ -9,13 +9,14 @@
           [expanded]="expandedEx01.expanded"
           [label]="expandedEx01.label"
           [value]="expandedEx01.value"
+          [width]="expandedEx01.width"
           (onCopy)="handleCopy($event)"></pfng-block-copy>
       </div>
   </div>
   <div class="row padding-top-10">
     <div class="col-sm-12">
       <h4 class="actions-label">Actions</h4>
-      <hr/>
+      <hr>
     </div>
   </div>
   <div class="row">

src/app/copy/block-copy/example/block-copy-expanded-example.component.ts

@@ -17,7 +17,8 @@ export class BlockCopyExpandedExampleComponent {
     expandToggleAriaLabel: 'Toggle GraphQL Query',
     expanded: true,
     label: 'GraphQL Query',
-    value: 'query HeroNameAndFriends($episode: Episode) {hero(episode: $episode) {name friends {name}}}'
+    value: 'query HeroNameAndFriends($episode: Episode) {hero(episode: $episode) {name friends {name}}}',
+    width: '605px'
   };
 
   constructor() {}

src/app/copy/block-copy/example/block-copy-notification-example.component.html

@@ -8,7 +8,7 @@
         [buttonLabel]="cbExConfig.buttonLabel"
         [expandToggleAriaLabel]="cbExConfig.expandToggleAriaLabel"
         [label]="cbExConfig.label"
-        [tooltip]="cbExConfig.tooltip"
+        [tooltipText]="cbExConfig.tooltip"
         [value]="cbExConfig.value"
         (onCopy)="handleCopy($event, {
             name: cbExConfig.buttonAriaLabel,
@@ -19,7 +19,7 @@
   <div class="row padding-top-10">
     <div class="col-sm-12">
       <h4 class="actions-label">Actions</h4>
-      <hr/>
+      <hr>
     </div>
   </div>
   <div class="row">

src/app/copy/copy-base.ts

@@ -11,6 +11,11 @@ import { CopyService } from './copy-service/copy.service';
  * A config containing properties for copy components
  */
 export abstract class CopyBase {
+  protected _copyDefaults = {
+    copyBtnTooltipText: 'Copy to Clipboard',
+    tooltipCopiedText: 'Copied'
+  };
+
   /**
    * Copy button aria label (announced to screen readers)
    */
@@ -19,18 +24,38 @@ export abstract class CopyBase {
   /**
    * A tooltip that describes the value to be copied
    */
-  @Input('tooltip') tooltip: string;
+  @Input('tooltipText') tooltipText: string;
 
   /**
    * Placement for the tooltip
    */
   @Input('tooltipPlacement') tooltipPlacement: string = 'top';
 
+  /**
+   * A tooltip that describes what the copy button does
+   */
+  @Input('copyBtnTooltipText') copyBtnTooltipText: string = this._copyDefaults.copyBtnTooltipText;
+
+  /**
+   * A tooltip that informs user that copy action recently occurred
+   */
+  @Input('tooltipCopiedText') tooltipCopiedText: string = this._copyDefaults.tooltipCopiedText;
+
+  /**
+   * Placement for the copy button tooltip
+   */
+  @Input('copyBtnTooltipPlacement') copyBtnTooltipPlacement: string = 'top';
+
   /**
    * The value to be copied to the clipboard
    */
   @Input('value') value: string;
 
+  /**
+   * A width to set on the copy container
+   */
+  @Input('width') width: string;
+
   /**
    * Event emitted when values are copied to the clipboard
    */
@@ -56,14 +81,17 @@ export abstract class CopyBase {
    * Copy given value to the clipboard
    */
   copy(): void {
-    let result = this.copyService.copy(this.value);
+    const result = this.copyService.copy(this.value),
+      originalCopyBtnTooltipText = this.copyBtnTooltipText;
     if (result) {
       this.onCopy.emit({
         value: this.value
       } as CopyEvent);
       this._recentlyCopied = true;
+      this.copyBtnTooltipText = this.tooltipCopiedText || this._copyDefaults.tooltipCopiedText;
       setTimeout(() => {
         this._recentlyCopied = false;
+        this.copyBtnTooltipText = originalCopyBtnTooltipText || this._copyDefaults.copyBtnTooltipText;
       }, 3000);
     }
   }