Merge pull request #588 from mobi/feature_ability_to_copy_doc_permalinks

Add directive for use in adding ability to copy permalinks to doc examples

projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts

@@ -0,0 +1,54 @@
+import { Component, ElementRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GoCopyDocLinkDirective } from './go-copy-doc-link.directive';
+import { GoCopyComponent } from './go-copy.component';
+import { GoCopyModule } from './go-copy.module';
+import { GoIconModule } from '../go-icon/go-icon.module';
+
+@Component({
+  template: `<go-copy cardId="testId" goCopyDocLink></go-copy>`
+})
+class TestParentComponent {}
+
+describe('GoCopyDocLinkDirective', () => {
+  let fixture: ComponentFixture<TestParentComponent>;
+  let elementRef: ElementRef;
+  let goCopyComponent: GoCopyComponent;
+  let directive: GoCopyDocLinkDirective;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        TestParentComponent
+      ],
+      imports: [
+        GoCopyModule,
+        GoIconModule
+      ]
+    });
+
+    fixture = TestBed.createComponent(TestParentComponent);
+    elementRef = fixture.elementRef;
+    goCopyComponent = TestBed.createComponent(GoCopyComponent).componentInstance;
+    directive = new GoCopyDocLinkDirective(elementRef, goCopyComponent);
+  });
+
+  it('creates an instance', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  describe('ngOnInit', () => {
+    it('adds a class of go-copy--card-header and sets the title of the element', () => {
+      directive.ngOnInit();
+      expect(elementRef.nativeElement.classList).toContain('go-copy--card-header');
+      expect(elementRef.nativeElement.title).toBe('Copy the URL to this card');
+    });
+
+
+    it('sets the text of the element with the current url and an id selector', () => {
+      directive.cardId = 'testId';
+      directive.ngOnInit();
+      expect(goCopyComponent.text).toBe('http://localhost:9876/context.html/#testId');
+    });
+  });
+});

projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, Host, Input, OnInit } from '@angular/core';
+import { GoCopyComponent } from './go-copy.component';
+
+@Directive({
+  selector: '[goCopyDocLink]'
+})
+export class GoCopyDocLinkDirective implements OnInit {
+
+  @Input() cardId: string;
+
+  constructor(
+    private elementRef: ElementRef,
+    @Host() private baseComponent: GoCopyComponent
+  ) { }
+
+  ngOnInit(): void {
+    this.elementRef.nativeElement.classList.add('go-copy--card-header');
+    this.elementRef.nativeElement.title = 'Copy the URL to this card';
+    this.baseComponent.text = `${window.location.href}/#${this.cardId}`;
+  }
+
+}

projects/go-lib/src/lib/components/go-copy/go-copy.component.scss

@@ -2,6 +2,12 @@
   position: relative;
 }
 
+:host.go-copy--card-header {
+  position: absolute;
+  margin-left: 0.75rem;
+  padding-top: 0.25rem;
+}
+
 .go-copy__textarea {
   left: 99999px;
   position: absolute;

projects/go-lib/src/lib/components/go-copy/go-copy.module.ts

@@ -3,17 +3,20 @@ import { CommonModule } from '@angular/common';
 
 import { GoCopyComponent } from './go-copy.component';
 import { GoIconModule } from '../go-icon/go-icon.module';
+import { GoCopyDocLinkDirective } from './go-copy-doc-link.directive';
 
 @NgModule({
   declarations: [
-    GoCopyComponent
+    GoCopyComponent,
+    GoCopyDocLinkDirective
   ],
   imports: [
     CommonModule,
     GoIconModule
   ],
   exports: [
-    GoCopyComponent
+    GoCopyComponent,
+    GoCopyDocLinkDirective
   ]
 })
 

projects/go-lib/src/styles/_typography.scss

@@ -32,6 +32,10 @@ strong {
   @extend %element--no-margin;
 }
 
+.go-heading--inline {
+  display: inline;
+}
+
 .go-link {
   @include transition(all);