Moves yank button to component and styles it

Author: thiagoarrais

app/components/yank-button.hbs

@@ -0,0 +1,27 @@
+{{#if @version.yanked}}
+  <button
+    type="button"
+    local-class="button"
+    disabled={{@version.unyankTask.isRunning}}
+    {{on "click" (perform @version.unyankTask)}}
+  >
+    {{#if @version.unyankTask.isRunning }}
+       Unyanking...
+    {{else}}
+       Unyank
+    {{/if}}
+  </button>
+{{else}}
+  <button
+    type="button"
+    local-class="button"
+    disabled={{@version.yankTask.isRunning}}
+    {{on "click" (perform @version.yankTask)}}
+  >
+    {{#if @version.yankTask.isRunning }}
+       Yanking...
+    {{else}}
+       Yank
+    {{/if}}
+  </button>
+{{/if}}

app/components/yank-button.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+    tagName: '',
+});

app/components/yank-button.module.css

@@ -0,0 +1,3 @@
+.button {
+    composes: yellow-button small from '../styles/shared/buttons.module.css';
+}

app/templates/crate/version.hbs

@@ -169,33 +169,7 @@
                 </LinkTo>
                 {{moment-format version.created_at 'll'}}
                 {{#if this.isOwner}}
-                  {{#if version.yanked}}
-                    <button
-                      type="button"
-                      local-class="remove-button"
-                      disabled={{version.unyankTask.isRunning}}
-                      {{on "click" (perform version.unyankTask)}}
-                    >
-                      {{#if version.unyankTask.isRunning }}
-                         Unyanking...
-                      {{else}}
-                         Unyank
-                      {{/if}}
-                    </button>
-                  {{else}}
-                    <button
-                      type="button"
-                      local-class="remove-button"
-                      disabled={{version.yankTask.isRunning}}
-                      {{on "click" (perform version.yankTask)}}
-                    >
-                      {{#if version.yankTask.isRunning }}
-                         Yanking...
-                      {{else}}
-                         Yank
-                      {{/if}}
-                    </button>
-                  {{/if}}
+                  <YankButton @version={{version}}/>
                 {{else}}
                   {{#if version.yanked}}
                     <span local-class='yanked'>yanked</span>

app/templates/crate/versions.hbs

@@ -14,33 +14,7 @@
 
         <span local-class="date">{{moment-format version.created_at 'LL'}}</span>
         {{#if this.isOwner}}
-          {{#if version.yanked}}
-            <button
-              type="button"
-              local-class="remove-button"
-              disabled={{version.unyankTask.isRunning}}
-              {{on "click" (perform version.unyankTask)}}
-            >
-              {{#if version.unyankTask.isRunning }}
-                  Unyanking...
-              {{else}}
-                  Unyank
-              {{/if}}
-            </button>
-          {{else}}
-            <button
-              type="button"
-              local-class="remove-button"
-              disabled={{version.yankTask.isRunning}}
-              {{on "click" (perform version.yankTask)}}
-            >
-              {{#if version.yankTask.isRunning }}
-                  Yanking...
-              {{else}}
-                  Yank
-              {{/if}}
-            </button>
-          {{/if}}
+          <YankButton @version={{version}} />
         {{else}}
           {{#if version.yanked}}
             <span local-class='yanked'>yanked</span>