Add progress bars to milestones public view

app/assets/stylesheets/milestones.scss

@@ -1,4 +1,4 @@
-.tab-milestones ul {
+.tab-milestones .timeline ul {
   margin-top: rem-calc(40);
   position: relative;
 }

app/helpers/milestones_helper.rb

@@ -0,0 +1,9 @@
+module MilestonesHelper
+  def progress_tag_for(progress_bar)
+    content_tag :progress,
+                number_to_percentage(progress_bar.percentage, precision: 0),
+                class: progress_bar.primary? ? "primary" : "",
+                max: ProgressBar::RANGE.max,
+                value: progress_bar.percentage
+  end
+end

app/models/concerns/milestoneable.rb

@@ -7,5 +7,13 @@ module Milestoneable
     scope :with_milestones, -> { joins(:milestones).distinct }
 
     has_many :progress_bars, as: :progressable
+
+    def primary_progress_bar
+      progress_bars.primary.first
+    end
+
+    def secondary_progress_bars
+      progress_bars.secondary
+    end
   end
 end

app/views/milestones/_milestones_content.html.erb

@@ -5,6 +5,22 @@
         <%= t("milestones.index.no_milestones") %>
       </div>
     <% end %>
+
+    <% if milestoneable.primary_progress_bar %>
+      <%= progress_tag_for(milestoneable.primary_progress_bar) %>
+
+      <% if milestoneable.secondary_progress_bars.any? %>
+        <ul class="milestone-progress">
+          <% milestoneable.secondary_progress_bars.each do |progress_bar| %>
+            <li>
+              <%= progress_bar.title %>
+              <%= progress_tag_for(progress_bar) %>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+    <% end %>
+
     <section class="timeline">
       <ul class="no-bullet">
         <% milestoneable.milestones.order_by_publication_date.each do |milestone| %>