Fix icons which are SVGs. (#166)

* Fix icons which are SVGs.

* Fix lint.

blocks/info-mouseover/info-mouseover.css

@@ -4,17 +4,6 @@
   margin-left: 4px;
 }
 
-
-.info-mouseover.block span.icon {
-  display: block;
-}
-
-.info-mouseover.block span.icon svg {
-  display: block;
-  height: 13px;
-  width: 13px;
-}
-
 .info-mouseover.block .info-content-wrapper {
   display: block;
   position: absolute;
@@ -93,6 +82,16 @@
   width: 100%;
 }
 
+.info-mouseover.block span.icon {
+  display: block;
+}
+
+.info-mouseover.block span.icon img {
+  display: block;
+  height: 13px;
+  width: 13px;
+}
+
 @media  screen and (min-width: 900px) {
   .info-mouseover.block .info-content-wrapper {
     left: -20px;
@@ -105,4 +104,4 @@
   .info-mouseover.block .info-content-wrapper::after {
     left: 18px;
   }
-}
+}

blocks/library-metadata/library-metadata.css

@@ -0,0 +1 @@
+/* Empty file for handling PSI checks on Block Library pages. */

blocks/library-metadata/library-metadata.js

@@ -0,0 +1 @@
+// Empty file for handling PSI checks on Block Library pages.

blocks/liveby-demographics/liveby-demographics.css

@@ -55,7 +55,7 @@
   font-size: var(--body-font-size-xxl);
 }
 
-.liveby-demographics.block > div .census-item .icon-bubble span.icon svg {
+.liveby-demographics.block > div .census-item .icon-bubble span.icon img {
   font-size: var(--body-font-size-xxl);
   color: var(--primary-color);
   height: 1em;

blocks/liveby-schools/liveby-schools.css

@@ -42,8 +42,13 @@ main .section.liveby-schools-container p {
   margin: 1em 0;
 }
 
+.liveby-schools .actions p.button-container {
+  text-align: center;
+}
+
 .liveby-schools .actions p.button-container a {
   padding: .85em 1.15em;
+  margin: 0 auto;
   font-size: var(--body-font-size-m);
   color: var(--white);
   background-color: var(--primary-color);
@@ -90,13 +95,12 @@ main .section.liveby-schools-container p {
   opacity: .625;
 }
 
-
 .liveby-schools .school-lists section .school-item .school-details h3 {
   margin: 0;
   font-family: var(--font-family-georgia);
   font-weight: var(--font-weight-bold);
   font-size: var(--heading-font-size-xs);
-  line-height: var(--line-height-reg);
+  line-height: var(--line-height-m);
   border-bottom: none;
 }
 
@@ -162,4 +166,4 @@ main .section.liveby-schools-container p {
     flex-basis: 33%;
     margin: 1em;
   }
-}
+}

blocks/liveby-schools/liveby-schools.js

@@ -1,4 +1,3 @@
-import { decorateIcons } from '../../scripts/aem.js';
 import { LIVEBY_API } from '../../scripts/scripts.js';
 
 const ES_GRADES = ['PK', 'KG', '01', '02', '03', '04', '05', '06'];
@@ -50,7 +49,8 @@ const sortMap = {
   rating: ratingSort,
 };
 
-function buildSchoolList(type, schools, sort = ratingSort) {
+async function buildSchoolList(type, schools, sort = ratingSort) {
+  const star = await fetch('/icons/liveby_rating.svg').then((resp) => (resp.ok ? resp.text() : ''));
   const sorted = schools.sort(sort);
 
   const section = document.createElement('section');
@@ -86,6 +86,7 @@ function buildSchoolList(type, schools, sort = ratingSort) {
         if (s.rating >= i) {
           span.classList.add('filled');
         }
+        span.innerHTML = star;
         rating.append(span);
       }
     } else {
@@ -95,8 +96,6 @@ function buildSchoolList(type, schools, sort = ratingSort) {
     item.append(rating);
     section.append(item);
   });
-
-  decorateIcons(section);
   return section;
 }
 
@@ -152,9 +151,9 @@ export default async function decorate(block) {
       sections.classList.add('school-lists');
 
       sections.append(
-        buildSchoolList('Elementary', elementary),
-        buildSchoolList('Middle', middle),
-        buildSchoolList('High', high),
+        await buildSchoolList('Elementary', elementary),
+        await buildSchoolList('Middle', middle),
+        await buildSchoolList('High', high),
       );
       block.append(sections);
 
@@ -173,14 +172,14 @@ export default async function decorate(block) {
       });
       block.append(more);
 
-      block.querySelector('.sort select').addEventListener('change', (e) => {
+      block.querySelector('.sort select').addEventListener('change', async (e) => {
         e.preventDefault();
         e.stopPropagation();
         const resort = sortMap[e.target.value || 'name'];
         sections.replaceChildren(
-          buildSchoolList('Elementary', elementary, resort),
-          buildSchoolList('Middle', middle, resort),
-          buildSchoolList('High', high, resort),
+          await buildSchoolList('Elementary', elementary, resort),
+          await buildSchoolList('Middle', middle, resort),
+          await buildSchoolList('High', high, resort),
         );
       });
     }