Display popover on harvey balls not in a zone

This wraps bootstrap styles in `sqm_bootstrap` which can now selectively
import specific desired pieces of bootstrap styling

app/assets/stylesheets/bootstrap-overrides.scss

@@ -33,3 +33,8 @@ $input-btn-focus-color-opacity: 0.35;
 
 $accordion-border-radius: 8px;
 $accordion-button-active-bg: $gray-3;
+
+$popover-border-color: transparent;
+$popover-border-radius: 4px;
+$popover-body-padding-x: map-get($spacers, 4);
+$popover-body-padding-y: map-get($spacers, 4);

app/assets/stylesheets/dashboard.scss

@@ -31,10 +31,6 @@
   font-size: 14px;
 }
 
-.subcategory-card__benchmark-icon {
-  fill: Red;
-}
-
 .subcategory-card__benchmark-item {
   display: flex;
   align-items: center;
@@ -45,12 +41,12 @@
 .subcategory-card__circle {
   min-width: 24px;
   min-height: 24px;
-  margin-right: 4px;
+  height: 24px;
-  height: 26px;
+  width: 24px;
-  width: 26px;
   display: flex;
   justify-content: center;
   align-items: center;
+  @extend .me-3;
 }
 
 .subcategory-card__benchmark-label {
@@ -70,6 +66,12 @@
   @extend .sub-header-4;
 }
 
+.subcategory-card__circle:focus {
+  outline: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba($blue, 0.35);
+}
+
 .harvey-ball {
   stroke: $black;
 }

app/assets/stylesheets/sqm_application.scss

@@ -1,5 +1,4 @@
-@import "bootstrap-overrides";
+@import "sqm_bootstrap";
-@import "bootstrap";
 @import "clear-margin-padding";
 @import "colors";
 @import "fonts";

app/assets/stylesheets/sqm_bootstrap.scss

@@ -0,0 +1,52 @@
+@import "colors";
+@import "bootstrap-overrides";
+
+// Configuration
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+@import "bootstrap/utilities";
+
+// Layout & components
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+@import "bootstrap/card";
+@import "bootstrap/accordion";
+@import "bootstrap/breadcrumb";
+@import "bootstrap/pagination";
+@import "bootstrap/badge";
+@import "bootstrap/alert";
+@import "bootstrap/progress";
+@import "bootstrap/list-group";
+@import "bootstrap/close";
+@import "bootstrap/toasts";
+@import "bootstrap/modal";
+@import "bootstrap/tooltip";
+@import "bootstrap/popover";
+@import "bootstrap/carousel";
+@import "bootstrap/spinners";
+@import "bootstrap/offcanvas";
+@import "bootstrap/placeholders";
+
+// Helpers
+@import "bootstrap/helpers";
+
+// Utilities
+@import "bootstrap/utilities/api";
+
+
+.popover {
+  box-shadow: 0 0 8px rgba($black, 0.25);
+}

app/javascript/application.js

@@ -7,10 +7,11 @@ import * as ActiveStorage from "@rails/activestorage"
 Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
-import { initializeListenersForNavDropdowns } from "./dashboard.js"
+import { initializeListenersForNavDropdowns, initializePopovers } from "./dashboard"
-import { initializeListenersForHomeDropdowns } from "./home.js"
+import { initializeListenersForHomeDropdowns } from "./home"
 
 document.addEventListener("turbolinks:load", () => {
   initializeListenersForNavDropdowns()
   initializeListenersForHomeDropdowns()
+  initializePopovers()
 })

app/javascript/dashboard.js

@@ -1,3 +1,5 @@
+import { Popover } from "bootstrap";
+
 export function initializeListenersForNavDropdowns() {
   const schoolDropdown = document.querySelector("#select-school");
   if (schoolDropdown) {
@@ -14,3 +16,11 @@ export function initializeListenersForNavDropdowns() {
       });
   }
 }
+
+export function initializePopovers() {
+  document
+    .querySelectorAll('[data-bs-toggle="popover"]')
+    .forEach(popoverElement => {
+      new Popover(popoverElement, { trigger: 'hover focus' })
+    })
+}

app/presenters/category_presenter.rb

@@ -1,6 +1,4 @@
 class CategoryPresenter
-  attr_reader :category
-
   def initialize(category:)
     @category = category
   end

app/presenters/subcategory_card_presenter.rb

@@ -1,6 +1,8 @@
 class SubcategoryCardPresenter
+  attr_reader :name
 
-  def initialize(scale:, score:)
+  def initialize(name:, scale:, score:)
+    @name = name
     @scale = scale
     @score = score
   end
@@ -21,6 +23,10 @@ class SubcategoryCardPresenter
     zone.type.to_s
   end
 
+  def insufficient_data?
+    zone.type == :no_zone
+  end
+
   private
 
   def zone

app/presenters/subcategory_presenter.rb

@@ -18,7 +18,7 @@ class SubcategoryPresenter
   end
 
   def subcategory_card_presenter
-    SubcategoryCardPresenter.new(scale: scale, score: average_score)
+    SubcategoryCardPresenter.new(name: @subcategory.name, scale: scale, score: average_score)
   end
 
   def average_score

app/views/dashboard/_quality_framework_indicators.erb

@@ -5,7 +5,7 @@
     </div>
     <div class="text-center">
       <h3 class="sub-header-3">
-        <%= link_to [@district, @school, category_presenter.category, { year: @academic_year.range }] do %>
+        <%= link_to [@district, @school, category_presenter, { year: @academic_year.range }] do %>
           <%= category_presenter.name %>
         <% end %>
       </h3>
@@ -14,12 +14,8 @@
     <p class="body-small text-center"><%= category_presenter.description %></p>
 
     <div>
-      <div class="subcategory-card border-radius-8">
       <div class="subcategory-card__benchmark-list">
-          <% category_presenter.subcategories(academic_year: @academic_year, school: @school).each do |subcategory| %>
+        <%= render partial: 'subcategory_card', collection: category_presenter.subcategories(academic_year: @academic_year, school: @school).map(&:subcategory_card_presenter) %>
-            <%= render partial: 'subcategory_card', locals: { presenter: subcategory.subcategory_card_presenter, subcategory: subcategory } %>
-          <% end %>
-        </div>
       </div>
     </div>
   <% end %>

app/views/dashboard/_subcategory_card.html.erb

@@ -1,7 +1,7 @@
 <div class="subcategory-card__benchmark-item">
-  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg" <%= "data-bs-toggle=popover" if subcategory_card.insufficient_data? %> data-bs-content="This subcategory is not displayed due to low survey response rates.">
-    <use class="harvey-ball harvey-ball--<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
+    <use class="harvey-ball harvey-ball--<%= subcategory_card.color %>" xlink:href="#<%= subcategory_card.harvey_ball_icon %>"></use>
   </svg>
 
-  <div class="subcategory-card__name"><%= subcategory.name %></div>
+  <div class="subcategory-card__name"><%= subcategory_card.name %></div>
 </div>

spec/presenters/subcategory_card_presenter_spec.rb

@@ -10,7 +10,7 @@ describe SubcategoryCardPresenter do
     )
   end
 
-  let(:subcategory_card_presenter) { SubcategoryCardPresenter.new(scale: scale, score: score)}
+  let(:subcategory_card_presenter) { SubcategoryCardPresenter.new(name: 'Card name', scale: scale, score: score) }
 
   context 'when the given score is in the Warning zone for the given scale' do
     let(:score) { 1 }
@@ -78,5 +78,9 @@ describe SubcategoryCardPresenter do
     it 'returns the icon that represents the zone' do
       expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
     end
+
+    it 'reports that there is insufficient data' do
+      expect(subcategory_card_presenter.insufficient_data?).to be true
+    end
   end
 end