Move milestones progress bars partial to a component

app/components/milestones/progress_bars_component.html.erb

@@ -0,0 +1,22 @@
+<section class="progress-bars">
+  <h5><%= t("milestones.index.progress") %></h5>
+
+  <div class="margin">
+    <%= progress_tag_for(milestoneable.primary_progress_bar) %>
+  </div>
+
+  <% if milestoneable.secondary_progress_bars.any? %>
+    <div class="milestone-progress">
+      <% milestoneable.secondary_progress_bars.each do |progress_bar| %>
+        <div class="row margin-bottom">
+          <div class="small-12 medium-6 large-4 column">
+            <%= progress_bar.title %>
+          </div>
+          <div class="small-12 medium-6 large-8 column end">
+            <%= progress_tag_for(progress_bar) %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</section>

app/components/milestones/progress_bars_component.rb

@@ -0,0 +1,28 @@
+class Milestones::ProgressBarsComponent < ApplicationComponent
+  attr_reader :milestoneable
+
+  def initialize(milestoneable)
+    @milestoneable = milestoneable
+  end
+
+  def render?
+    milestoneable.primary_progress_bar
+  end
+
+  private
+
+    def progress_tag_for(progress_bar)
+      text = number_to_percentage(progress_bar.percentage, precision: 0)
+
+      tag.div class: "progress",
+              role: "progressbar",
+              "aria-valuenow": progress_bar.percentage,
+              "aria-valuetext": "#{progress_bar.percentage}%",
+              "aria-valuemax": ProgressBar::RANGE.max,
+              "aria-valuemin": "0",
+              tabindex: "0" do
+        tag.span(class: "progress-meter", style: "width: #{progress_bar.percentage}%;") +
+          tag.p(text, class: "progress-meter-text")
+      end
+    end
+end