Merge branch 'master' into update-table-of-contents-component-to-glimmer

Author: chriskrycho

app/components/import-example.hbs

@@ -0,0 +1,21 @@
+<div class='highlight javascript'>
+  <div class='ribbon'></div>
+  {{#if (is-clipboard-supported)}}
+    <div class='import-copy'>
+      {{#if this.showClipboardSuccessIcon}}
+        {{svg-jar 'success' width='24px' height='24px'}}
+      {{else}}
+        <CopyButton @clipboardText={{concat 'import ' @item " from '" @package "';"}} @title='Copy to clipboard' @success={{this.showSuccess}}>
+          {{svg-jar 'copy' width='24px' height='24px'}}
+        </CopyButton>
+      {{/if}}
+    </div>
+  {{/if}}
+  <table class='CodeRay'>
+    <tbody>
+      <tr>
+        <td class='code'><pre><span class='wrapper'><span class='keyword'>import</span> {{@item}} <span class='keyword'>from</span> <span class='string'>'{{@package}}'</span>;</span></pre></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

app/components/import-example.js

@@ -1,12 +1,14 @@
-/* eslint-disable ember/classic-decorator-no-classic-methods */
 import { action } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { later } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 export default class ImportExample extends Component {
+  @tracked showClipboardSuccessIcon = false;
+
   @action
   showSuccess() {
-    this.toggleProperty('showClipboardSuccessIcon');
-    later(this, () => this.toggleProperty('showClipboardSuccessIcon'), 950);
+    this.showClipboardSuccessIcon = true;
+    later(this, () => (this.showClipboardSuccessIcon = false), 950);
   }
 }

app/templates/components/import-example.hbs

@@ -8,14 +8,14 @@ module('Integration | Component | import example', function (hooks) {
 
   test('it renders a class import example', async function (assert) {
     await render(
-      hbs`{{import-example item='Application' package='@ember/application'}}`
+      hbs`<ImportExample @item='Application' @package='@ember/application'/>`
     );
     assert.dom('*').hasText("import Application from '@ember/application';");
   });
 
   test('it renders a function import example', async function (assert) {
     await render(
-      hbs`{{import-example item='{ uniqBy }' package='@ember/object/computed'}}`
+      hbs`<ImportExample @item='{ uniqBy }' @package='@ember/object/computed'/>`
     );
     assert.dom('*').hasText("import { uniqBy } from '@ember/object/computed';");
   });