diff --git a/app/helpers/application_widgets_helper.rb b/app/helpers/application_widgets_helper.rb index 3f2af262b31..4af0a151e21 100644 --- a/app/helpers/application_widgets_helper.rb +++ b/app/helpers/application_widgets_helper.rb @@ -164,4 +164,18 @@ def deduce_resource_object_name(resource) model_name_from_record_or_class(resource).param_key end end + + # Display a progress_bar with the given percentage and styling. The percentage is assumed to + # be a number ranging from 0-100. In addition, a block can be passed to add custom text. + # + # @param [Fixnum] percentage The percentage to be displayed on the progress bar. + # @param [Array] classes An array of classes to apply to the progress bar. + # @yield The HTML text which will be passed to the partial as text to be shown in the bar. + # @return [String] HTML string to render the progress bar. + def display_progress_bar(percentage, classes = ['progress-bar-info']) + render layout: 'layouts/progress_bar', locals: { percentage: percentage, + progress_bar_classes: classes } do + yield if block_given? + end + end end diff --git a/app/views/course/users/invitations.html.slim b/app/views/course/users/invitations.html.slim index 75a2c88c1e8..e019f348f09 100644 --- a/app/views/course/users/invitations.html.slim +++ b/app/views/course/users/invitations.html.slim @@ -5,10 +5,8 @@ - accepted_course_users = @course_users.each.select { |user| !user.invited? }.size - progress = accepted_course_users * 100 / [@course_users.length, 1].max -div.progress - div.progress-bar role='progressbar' aria-valuenow=progress aria-valuemin='0' aria-valuemax='100' style="width: #{progress}%" - span - = t('.progress', accepted: accepted_course_users, total: @course_users.size) += display_progress_bar progress, [] do + = t('.progress', accepted: accepted_course_users, total: @course_users.size) = simple_format t('.manual_acceptance') diff --git a/app/views/layouts/_progress_bar.html.slim b/app/views/layouts/_progress_bar.html.slim new file mode 100644 index 00000000000..f5c9ebff341 --- /dev/null +++ b/app/views/layouts/_progress_bar.html.slim @@ -0,0 +1,5 @@ +div.progress + div.progress-bar [ class=progress_bar_classes role='progressbar' aria-valuenow="#{percentage}" + aria-valuemin='0' aria-valuemax='100' style="width: #{percentage}%" ] + span.sr-only #{percentage}% Complete + = yield diff --git a/spec/helpers/application_widgets_helper_spec.rb b/spec/helpers/application_widgets_helper_spec.rb index 98735540f18..ad6534ea5ed 100644 --- a/spec/helpers/application_widgets_helper_spec.rb +++ b/spec/helpers/application_widgets_helper_spec.rb @@ -180,5 +180,34 @@ def stub_resource_button end end end + + describe '#display_progress_bar' do + let(:default_class) { 'progress-bar-info' } + subject { helper.send(:display_progress_bar, 50) } + it 'returns a progress bar' do + expect(subject).to have_tag('div.progress-bar', with: { role: 'progressbar' }) + end + + it 'specifies the correct percentage of the progress bar' do + expect(subject).to have_tag('div.progress-bar', style: 'width: 50%') + end + + it 'defaults to .progress-bar-info' do + expect(subject).to include(default_class) + end + + context 'when classes are specified' do + it 'is reflected in the progress bar' do + expect(helper.send(:display_progress_bar, 50, ['progress-bar-striped'])). + to have_tag('div.progress-bar.progress-bar-striped') + end + end + + context 'when a block is given' do + it 'appends the text within the progress bar' do + expect(helper.send(:display_progress_bar, 50) { '30%' }).to include('30%') + end + end + end end end