Merge pull request #887 from lukasnys/anchor-redesign

API docs redesign anchor

Author: MinThaMie

app/components/class-field-description.hbs

@@ -1,9 +1,5 @@
 <section class='{{@type}}'>
-  {{!-- TODO: Fix this link for a11y --}}
-  <h3 class='class-field-description--link' data-anchor='{{@field.name}}' role='link' {{on 'click' (fn this.updateAnchor @field.name)}}>
-    <a class='anchor' {{!-- template-lint-disable link-href-attributes --}}>
-      {{svg-jar 'fa-link' class='class-field-description--link-hover' width='20px' height='20px'}}
-    </a>
+  <h3 data-anchor='{{@field.name}}'>
     <span class='{{@type}}-name'>{{@field.name}}</span>
     {{#if @field.params}}
       <span class='args'>
@@ -19,6 +15,10 @@
     {{#if @field.deprecated}}
       <span class='access'>deprecated</span>
     {{/if}}
+    {{!-- TODO: Fix this link for a11y --}}
+    <a class='class-field-description--link' data-test-anchor="{{@field.name}}" role='link' {{on 'click' (fn this.updateAnchor @field.name)}} {{!-- template-lint-disable link-href-attributes --}}>
+      {{svg-jar 'link' width='20px' height='20px'}}
+    </a>
   </h3>
   {{#if @model.module}}
     <div class='attributes'>

app/styles/app.css

@@ -90,6 +90,24 @@ li.toc-heading:first-child {
   margin-top: 0;
 }
 
+a.class-field-description--link {
+  margin-left: 12px;
+  vertical-align: middle;
+  background: none;
+  cursor: pointer;
+}
+
+a.class-field-description--link svg {
+  height: 18px;
+  fill: var(--color-gray-600);
+  transform: rotate(45deg);
+  vertical-align: middle;
+}
+
+a.class-field-description--link:hover svg {
+  fill: var(--color-brand);
+}
+
 @media (min-width: 845px) {
   .es-header {
     padding: 0 var(--spacing-4);

public/assets/images/fa-link.svg

@@ -11,7 +11,9 @@ module('Acceptance | Creating Anchors', function (hooks) {
     await click(element);
     assert.equal(
       currentURL(),
-      `/ember/1.0/classes/Container/properties?anchor=${element.innerText.trim()}`
+      `/ember/1.0/classes/Container/properties?anchor=${element.getAttribute(
+        'data-test-anchor'
+      )}`
     );
   });
 });

public/assets/images/link.svg

@@ -2,13 +2,7 @@
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import {
-  render,
-  click,
-  findAll,
-  find,
-  triggerEvent,
-} from '@ember/test-helpers';
+import { render, click, findAll, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | class field description', function (hooks) {
@@ -37,29 +31,6 @@ module('Integration | Component | class field description', function (hooks) {
     assert.dom(findAll('.args')[0]).hasText('(param1, param2, param3)');
   });
 
-  test('On hover -- the link icon shows up', async function (assert) {
-    this.set('type', 'method');
-    this.set(
-      'field',
-      EmberObject.create({
-        access: 'public',
-        deprecated: true,
-        name: 'concat',
-        description: 'concatenates',
-        params: [{ name: 'param1' }, { name: 'param2' }, { name: 'param3' }],
-      })
-    );
-
-    await render(
-      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
-    );
-
-    await triggerEvent('.class-field-description--link', 'mouseenter');
-    assert
-      .dom('.class-field-description--link-hover')
-      .exists('The link icon appears when hovering on the method text');
-  });
-
   test('it calls the provided action on link-click with the field name as an arg', async function (assert) {
     this.set('updateAnchor', (name) => {
       assert.equal(