From a0b9c231008825adef6155ab39c3cc5a98c1f478 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Tue, 2 May 2017 11:57:26 +0100
Subject: [PATCH] feat(aio): support hiding the copy button on `code-examole`
 components

In the API docs there are occasions where we do not wish the code snippet
to have a copy button. This commit supports that by providing a new `hideCopy`
attribute.
---
 .../app/embedded/code/code-example.component.spec.ts   |  8 ++++++++
 aio/src/app/embedded/code/code-example.component.ts    |  4 +++-
 aio/src/app/embedded/code/code.component.spec.ts       | 10 +++++++++-
 aio/src/app/embedded/code/code.component.ts            |  8 +++++++-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/aio/src/app/embedded/code/code-example.component.spec.ts b/aio/src/app/embedded/code/code-example.component.spec.ts
index cd50303c7f..698adc2702 100644
--- a/aio/src/app/embedded/code/code-example.component.spec.ts
+++ b/aio/src/app/embedded/code/code-example.component.spec.ts
@@ -65,6 +65,13 @@ describe('CodeExampleComponent', () => {
     const actual = codeExampleDe.query(By.css('header')).nativeElement.innerText;
     expect(actual).toBe('Great Example');
   });
+
+  it('should pass hideCopy to CodeComonent', () => {
+    TestBed.overrideComponent(HostComponent, {
+      set: {template: '<code-example hideCopy="true"></code-example>'}});
+    createComponent(oneLineCode);
+    expect(codeComponent.hideCopy).toBe(true);
+  });
 });
 
 //// Test helpers ////
@@ -83,6 +90,7 @@ class TestCodeComponent {
   @Input() linenums: boolean | number;
   @Input() path: string;
   @Input() region: string;
+  @Input() hideCopy: boolean;
 
   get someCode() {
     return this.code && this.code.length > 30 ? this.code.substr(0, 30) + '...' : this.code;
diff --git a/aio/src/app/embedded/code/code-example.component.ts b/aio/src/app/embedded/code/code-example.component.ts
index 5ba2c0aeb8..155a2c34cd 100644
--- a/aio/src/app/embedded/code/code-example.component.ts
+++ b/aio/src/app/embedded/code/code-example.component.ts
@@ -17,7 +17,7 @@ import { Component, ElementRef, OnInit } from '@angular/core';
   template: `
     <header *ngIf="title">{{title}}</header>
     <aio-code [ngClass]="{'headed-code':title, 'simple-code':!title}" [code]="code"
-    [language]="language" [linenums]="linenums" [path]="path" [region]="region"></aio-code>
+    [language]="language" [linenums]="linenums" [path]="path" [region]="region" [hideCopy]="hideCopy"></aio-code>
   `
 })
 export class CodeExampleComponent implements OnInit {
@@ -28,6 +28,7 @@ export class CodeExampleComponent implements OnInit {
   path: string;
   region: string;
   title: string;
+  hideCopy: boolean;
 
   constructor(private elementRef: ElementRef) {
     const element = this.elementRef.nativeElement;
@@ -37,6 +38,7 @@ export class CodeExampleComponent implements OnInit {
     this.path = element.getAttribute('path') || '';
     this.region = element.getAttribute('region') || '';
     this.title = element.getAttribute('title') || '';
+    this.hideCopy = element.getAttribute('hideCopy') === 'true';
   }
 
   ngOnInit() {
diff --git a/aio/src/app/embedded/code/code.component.spec.ts b/aio/src/app/embedded/code/code.component.spec.ts
index fc1e1e0d9e..022cfe4392 100644
--- a/aio/src/app/embedded/code/code.component.spec.ts
+++ b/aio/src/app/embedded/code/code.component.spec.ts
@@ -179,6 +179,13 @@ describe('CodeComponent', () => {
   });
 
   describe('copy button', () => {
+
+    it('should be hidden if the `hideCopy` input is true', () => {
+      hostComponent.hideCopy = true;
+      fixture.detectChanges();
+      expect(fixture.debugElement.query(By.css('button'))).toBe(null);
+    });
+
     it('should call copier service when clicked', () => {
       const copierService: CopierService = TestBed.get(CopierService);
       const spy = spyOn(copierService, 'copyText');
@@ -224,7 +231,7 @@ describe('CodeComponent', () => {
   selector: 'aio-host-comp',
   template: `
       <aio-code md-no-ink [code]="code" [language]="language"
-      [linenums]="linenums" [path]="path" [region]="region"></aio-code>
+      [linenums]="linenums" [path]="path" [region]="region" [hideCopy]="hideCopy"></aio-code>
   `
 })
 class HostComponent {
@@ -233,6 +240,7 @@ class HostComponent {
   linenums: boolean | number | string;
   path: string;
   region: string;
+  hideCopy: boolean;
 }
 
 class TestLogger {
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index 49f62926ce..3c678fc8d6 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -31,7 +31,7 @@ const defaultLineNumsCount = 10; // by default, show linenums over this number
   selector: 'aio-code',
   template: `
     <pre class="prettyprint lang-{{language}}">
-      <button *ngIf="code" class="material-icons copy-button" (click)="doCopy()">content_copy</button>
+      <button *ngIf="!hideCopy" class="material-icons copy-button" (click)="doCopy()">content_copy</button>
       <code class="animated fadeIn" #codeContainer></code>
     </pre>
     `
@@ -72,6 +72,12 @@ export class CodeComponent implements OnChanges {
   @Input()
   region: string;
 
+  /**
+   * set to true if the copy button is not to be shown
+   */
+  @Input()
+  hideCopy: boolean;
+
   /**
    * The element in the template that will display the formatted code
    */