Add translation markers to codelab elements. (googlecodelabs#538)

* Add translation markers to google_codelab.soy.

* Add translation markers to google_codelab_index.soy.

* Add translation markers to google_codelab_step.soy.

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update BUILD.bazel

* Update google_codelab.soy

* Update google_codelab_index.soy

codelab-elements/google-codelab-index/BUILD.bazel

@@ -79,5 +79,5 @@ sass_binary(
 
 closure_js_template_library(
     name = "google_codelab_index_soy",
-    srcs = ["google_codelab_index.soy"]
+    srcs = ["google_codelab_index.soy"],
 )

codelab-elements/google-codelab-index/google_codelab_index.soy

@@ -26,12 +26,24 @@
   {@param duration: number}
   {@param updated: string}
   {@param authors: string}
+
   <div class="card-header {$category}-bg">
     <span class="category-icon {$category}-icon"></span>
     <span class="card-duration">
       {if $duration}
         <img src="//codelabs.developers.google.com/images/schedule.svg">
-        {$duration} min
+
+        {if $duration == 1}
+          {msg desc="Label indicating expected time remaining (1 minute) for user to complete
+              codelab."}
+            {$duration} min remaining
+          {/msg}
+        {else}
+          {msg desc="Label indicating expected time remaining in minutes for user to complete
+              codelab."}
+            {$duration} mins remaining
+          {/msg}
+        {/if}
       {/if}
     </span>
   </div>
@@ -41,26 +53,55 @@
   <div class="card-footer {$category}-footer">
     <span class="card-start {$category}-start">Start</span>
     <span class="card-updated">
-      {if $authors}<div>{$authors}</div>{/if}
-      {if $updated}<div>Updated {$updated}</div>{/if}
+      {if $authors}
+        <div>
+          {$authors}
+        </div>
+      {/if}
+      {if $updated}
+        <div>
+          {msg desc="Time when codelab was last updated."}
+            Updated {$updated}
+          {/msg}
+        </div>
+      {/if}
     </span>
   </div>
 {/template}
 
-
 {template .sortby}
   {@param sort: string}
   {@param categories: list<string>}
+
   <div id="sort-by-tabs" class="sort-by-inner">
-    <a href="#" sort="alpha" {if $sort == 'alpha'}selected{/if}>A-Z</a>
-    <a href="#" sort="recent" {if $sort == 'recent'}selected{/if}>Recent</a>
-    <a href="#" sort="duration" {if $sort == 'duration'}selected{/if}>Duration</a>
+    <a href="#" sort="alpha" {if $sort == 'alpha'}selected{/if}>
+      {msg desc="Label for button to sort codelabs alphabetically by title."}
+        A-Z
+      {/msg}
+    </a>
+    <a href="#" sort="recent" {if $sort == 'recent'}selected{/if}>
+      {msg desc="Label for button to sort codelabs by recency."}
+        Recent
+      {/msg}
+    </a>
+    <a href="#" sort="duration" {if $sort == 'duration'}selected{/if}>
+      {msg desc="Label for button to sort codelabs by duration."}
+        Duration
+      {/msg}
+    </a>
   </div>
   <div class="sort-by-inner">
     <select id="codelab-categories">
-      <option value="">Category</option>
+      <option value="">
+
+        {msg desc="Label for dropdown menu used to filter codelabs by category."}
+          Category
+        {/msg}
+      </option>
       {for $i in range(length($categories))}
-        <option value="{$categories[$i]}">{$categories[$i]}</option>
+        <option value="{$categories[$i]}">
+          {$categories[$i]}
+        </option>
       {/for}
     </select>
   </div>

codelab-elements/google-codelab-step/google_codelab_step.soy

@@ -23,5 +23,10 @@
 {template .title}
   {@param step: string}
   {@param label: string}
-  <h2 is-upgraded class="step-title">{$step}. {$label}</h2>
+
+  <h2 is-upgraded class="step-title">
+    {msg desc="Codelab title composed from step number and label."}
+      {$step}. {$label}
+    {/msg}
+  </h2>
 {/template}

codelab-elements/google-codelab/BUILD.bazel

@@ -67,5 +67,5 @@ sass_binary(
 
 closure_js_template_library(
     name = "google_codelab_soy",
-    srcs = ["google_codelab.soy"]
+    srcs = ["google_codelab.soy"],
 )

codelab-elements/google-codelab/google_codelab.soy

@@ -22,7 +22,8 @@
  */
 {template .structure}
   {@param homeUrl: string}
-  <div id="drawer">Drawer</div>
+
+  <div id="drawer"></div>
   <div id="codelab-title">
     <div id="codelab-nav-buttons">
       <a href="{$homeUrl}" id="arrow-back"><i class="material-icons">close</i></a>
@@ -35,58 +36,103 @@
     <div id="steps"></div>
     <div id="controls">
       <div id="fabs">
-        <a href="#" id="previous-step" title="Previous step">Back</a>
+        <a href="#"
+           id="previous-step"
+           title=
+               "{msg desc="Tooltip for button that takes user back to the previous step of the
+                   codelab."}
+                 Previous step
+               {/msg}">
+          {msg desc="Button that takes user back to the previous step of the codelab."}
+            Back
+          {/msg}
+        </a>
         <div class="spacer"></div>
-        <a href="#" id="next-step" title="Next step">Next</a>
-        <a href="{$homeUrl}" id="done" hidden title="Codelab complete">Done</a>
+        <a href="#"
+           id="next-step"
+           title=
+               "{msg desc="Tooltip for button that takes user to the next step of the codelab."}
+                 Next step
+               {/msg}">
+          {msg desc="Button that takes user to the next step of the codelab."}
+            Next
+          {/msg}
+        </a>
+        <a href="{$homeUrl}"
+           id="done"
+           hidden
+           title=
+               "{msg desc="Tooltip for button that indicates the codelab user has completed the
+                   codelab."}
+                 Codelab complete
+               {/msg}">
+          {msg desc="Button that indicates the codelab user has completed the codelab."}
+            Done
+          {/msg}
+        </a>
       </div>
     </div>
   </div>
 {/template}
 
-
 /**
  * Renders the title
  */
 {template .title}
   {@param title: string}
-  <h1 is-upgraded class="title">{$title}</h1>
-{/template}
 
+  <h1 is-upgraded class="title">
+    {$title}
+  </h1>
+{/template}
 
 /**
  * Renders the time remaining
  */
 {template .timeRemaining}
   {@param time: number}
-  <div class="time-remaining" title="Time remaining">
-   <i class="material-icons">access_time</i>
-   {if $time == 1}
-    {$time} min remaining
-   {else}
-    {$time} mins remaining
-   {/if}
+
+  <div class="time-remaining"
+       title=
+           "{msg desc="Label indicating expected time remaining for user to complete codelab."}
+             Time remaining
+           {/msg}">
+    <i class="material-icons">access_time</i>
+    {if $time == 1}
+      {msg desc="Label indicating expected time remaining (1 minute) for user to complete codelab."}
+        {$time} min remaining
+      {/msg}
+    {else}
+      {msg desc="Label indicating expected time remaining in minutes for user to complete codelab."}
+        {$time} mins remaining
+      {/msg}
+    {/if}
   </div>
 {/template}
 
-
 /**
  * Renders the drawer
  */
 {template .drawer}
   {@param steps: list<string>}
   {@param? feedback: string}
+
   <div class="codelab-time-container"></div>
   <div class="steps">
     <ol>
       {for $step in $steps}
-        <li><a href="#{index($step)}"><span class="step"><span>{$step}</span></span></a></li>
+        <li>
+          <a href="#{index($step)}"><span class="step"><span>{$step}</span></span></a>
+        </li>
       {/for}
     </ol>
   </div>
   <div class="metadata">
     <a {if $feedback}target="_blank" href="{$feedback}"{else}href="#" id="codelab-feedback"{/if}>
-      <i class="material-icons">bug_report</i> Report a mistake
+      <i class="material-icons">bug_report</i> {msg desc="Button that the user can click to report
+          an bug or error."}
+        Report a mistake
+      {/msg}
     </a>
   </div>
 {/template}