New: Completion icon added to transcript button (#291)

Author: kirsty-hames

less/media.less

@@ -7,10 +7,6 @@
 
   // Transcript
   // --------------------------------------------------
-  &__transcript-body-inline {
-    display: none;
-  }
-
   // Skip to transcript button
   &__skip-to-transcript {
 
@@ -26,6 +22,26 @@
     }
   }
 
+  // Transcript container
+  &__transcript-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__transcript-btn-icon {
+    margin-inline-start: @icon-padding / 2;
+  }
+
+  &.is-complete &__transcript-btn-icon .icon {
+    .icon-tick;
+  }
+
+  &__transcript-body-inline {
+    display: none;
+  }
+
+
   // Cross browser bug fixes
   // --------------------------------------------------
   .me-plugin {

templates/media.hbs

@@ -61,6 +61,9 @@
         {{_transcript.transcriptLink}}
         {{/if}}
       </span>
+      <span class="media__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
     </button>
     {{/if}}
 
@@ -73,6 +76,9 @@
         {{_transcript.transcriptLink}}
         {{/if}}
       </span>
+      <span class="media__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
     </button>
     {{/if}}