Issue #3144 - Bootstrap 5 accordion replaces old accordion for Usage

Statistics page.

app/assets/stylesheets/blocks/_accordion.scss

@@ -0,0 +1,17 @@
+@use '../variables/colours' as *;
+@use "../../../../node_modules/bootstrap/scss/bootstrap" as *;
+
+// The Accordion color variables used are set in _colors.scss
+.accordion-button {
+ font-size: inherit;
+ color: $color-accordion-button !important;
+ background-color: $color-accordion-button-bg !important;
+}
+
+
+// Accordion arrow svg, the color is set by a variable $color-accordion-arro in the _colours.scss. This allows us to change color of arrow.
+// We need to remove # sympols in svg with the unicode %23. Hence the use of the replace function.
+.accordion-button:not(.collapsed)::after, .accordion-button.collapsed::after {
+ background-image: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$color-accordion-arrow}' %3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"), '#', '%23') !important;
+}
+

app/assets/stylesheets/blocks/_index.scss

@@ -1,4 +1,5 @@
 @use 'accessibility';
+@use 'accordion';
 @use 'alerts';
 @use 'autocomplete';
 @use 'buttons';

app/assets/stylesheets/utils/_functions.scss

@@ -0,0 +1,9 @@
+@function str-replace($string, $search, $replace: '') {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}

app/assets/stylesheets/utils/_index.scss

@@ -5,3 +5,4 @@
 @use 'font_size';
 @use 'icons';
 @use 'margins';
+@use 'functions';

app/assets/stylesheets/variables/_colours.scss

@@ -30,6 +30,7 @@ $color-footer-background: $color-navbar-background;
 $color-tooltip-background: $color-primary-background;
 $color-icon-bar-background: $color-white;
 
+
 // Text
 $color-primary-text: $color-white;
 $color-secondary-text: $color-grey;
@@ -64,3 +65,11 @@ $color-fa: $color-grey;
 
 // Focus colors
 $color-focus-outline: $color-blue-alice-darkest;
+
+// Accordion colors
+$color-accordion-button: $color-white;
+$color-accordion-arrow: $color-white;
+$color-accordion-button-bg: $color-grey-darkest;
+$color-accordion-button-active-bg: darken($color-accordion-button-bg, 10%) ;
+
+

app/views/usage/_template_statistics_accordion.html.erb

@@ -1,29 +1,21 @@
 <%# locals: expanded %>
 
-<div class="card card-default">
- <a href="#template_statistics" class="heading-button"
- data-toggle="collapse" data-parent="usage-accordion"
- data-target="#collapseTemplateStatistics"
- aria-expanded="true" aria-controls="#collapseTemplateStatistics">
+ <div class="accordion-item w-100">
+ <h2 class="accordion-header" id="headingTemplateStatistics">
+ <button href="#template_statistics" type="button" 
+ class="accordion-button" data-bs-toggle="collapse" 
+ data-bs-target="#collapseTemplateStatistics" aria-expanded="true" aria-controls="collapseTemplateStatistics">
+ <%= _('Statistics on your Templates') %>
+ </button>
+ </h2>
 
- <div class="card-heading" role="tab" id="headingTemplateStatistics">
- <div class="card-title pull-left">
- <%= _('Statistics on your Templates') %>
- </div>
- <div class="pull-right">
- <i class="fas fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
- </div>
- <div class="clearfix"></div>
- </div>
- </a>
  <div id="collapseTemplateStatistics"
- class="card-collapse collapse <%='in' if expanded %>"
- role="tabpanel" aria-labled-by="headingTemplateStatistics">
- <div class="card-body">
-
+ class="card collapse <%='show' if expanded %>"
+ role="tabpanel" 
+ aria-labelledby="headingTemplateStatistics"
+ data-bs-parent="#usage-accordion">
+ <div class="accordion-body">
  <%= render partial: 'usage/template_statistics' %>
-
  </div>
  </div>
-
 </div>

app/views/usage/_user_statistics_accordion.html.erb

@@ -1,29 +1,21 @@
 <%# locals: expanded %>
+ <div class="accordion-item w-100 my-3">
+ <h2 class="accordion-header" id="headingUserStatistics">
+ <button href="#user_statistics" type="button" 
+ class="accordion-button" data-bs-toggle="collapse" 
+ data-bs-target="#collapseUserStatistics" aria-expanded="true" aria-controls="collapseUserStatistics">
+ <%= _('Statistics on your Users') %>
+ </button>
+ </h2>
 
-<div class="card card-default">
- <a href="#user_statistics" class="heading-button"
- data-toggle="collapse" data-parent="usage-accordion"
- data-target="#collapseUserStatistics"
- aria-expanded="true" aria-controls="#collapseUserStatistics">
 
- <div class="card-heading" role="tab" id="headingUserStatistics">
- <div class="card-title pull-left">
- <%= _('Statistics on your Users') %>
- </div>
- <div class="pull-right">
- <i class="fas fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
- </div>
- <div class="clearfix"></div>
- </div>
- </a>
  <div id="collapseUserStatistics"
- class="card-collapse collapse <%='in' if expanded %>"
- role="tabpanel" aria-labled-by="headingUserStatistics">
- <div class="card-body">
-
+ class="collapse <%='show' if expanded %>"
+ role="tabpanel" 
+ aria-labelledby="headingUserStatistics"
+ data-bs-parent="#usage-accordion">
+ <div class="accordion-body">
  <%= render partial: 'usage/user_statistics' %>
-
  </div>
  </div>
-
 </div>

app/views/usage/index.html.erb

@@ -14,7 +14,7 @@
 <% if @funder.present? %>
  <%= render partial: 'usage/template_statistics' %>
 <% else %>
- <div class="card-group usage-accordion" role="tablist" aria-multiselectable="true">
+ <div  id="usage-accordion" class="accordion" role="tablist" aria-multiselectable="true">
  <%= render partial: 'usage/user_statistics_accordion', locals: {expanded: true} %>
  <%= render partial: 'usage/template_statistics_accordion', locals: {expanded: false} %>
  </div>