Add authority logos at bottom of results (#22)

## Description

This isn't 100% exactly as designed. The design calls for a white
background that extends horizontally beyond the borders of the
incentive grid. That doesn't work with how this embed element is
implemented: it just fills 100% of the width of its container, so
nothing can extend beyond the grid boundaries. Not sure if what I've
done is an acceptable end state, or if we need to build in a way to
limit the width of the incentive grid without limiting the width of
the logos background.

## Test Plan

See screenshot. Try with different utility selections to make sure
their logos come up. Check narrow and medium layouts to check for
appropriate layout.

src/api/calculator-types-v1.ts

@@ -53,6 +53,16 @@ export interface Incentive {
 }
 
 export interface APIResponse {
+  authorities: {
+    [authorityId: string]: {
+      name: string;
+      logo?: {
+        src: string;
+        width: number;
+        height: number;
+      };
+    };
+  };
   savings: {
     tax_credit: number;
     pos_rebate: number;

src/authority-logos.ts

@@ -0,0 +1,69 @@
+import { css, html, nothing } from 'lit';
+import { APIResponse } from './api/calculator-types-v1';
+
+export const authorityLogosStyles = css`
+  .authority-logos {
+    width: 100%;
+    max-width: 1280px;
+
+    background-color: white;
+  }
+
+  .authority-logos h2 {
+    text-align: center;
+    color: #111;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 125%;
+
+    margin: 48px 24px 64px 24px;
+  }
+
+  /* Tighter margins for the header on small screens */
+  @media only screen and (max-width: 640px) {
+    .authority-logos h2 {
+      font-size: 1.5rem;
+      margin-top: 32px;
+      margin-bottom: 48px;
+    }
+  }
+
+  .authority-logos__container {
+    display: flex;
+
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 64px;
+
+    margin-bottom: 80px;
+  }
+`;
+
+/**
+ * Displays the white area at the bottom of the calculator results with logos
+ * of the authorities whose incentives are displayed.
+ */
+export const authorityLogosTemplate = (response: APIResponse) => {
+  if (Object.keys(response.authorities).length === 0) {
+    return nothing;
+  }
+
+  const logos = Object.values(response.authorities)
+    .filter(auth => !!auth.logo)
+    .map(
+      auth =>
+        html`<img
+          src="${auth.logo!.src}"
+          width="${auth.logo!.width}"
+          height="${auth.logo!.height}"
+        />`,
+    );
+
+  return html`
+    <div class="authority-logos">
+      <h2>Incentive data brought to you by</h2>
+      <div class="authority-logos__container">${logos}</div>
+    </div>
+  `;
+};

src/state-calculator.ts

@@ -21,6 +21,7 @@ import { iconTabBarStyles } from './icon-tab-bar';
 
 import '@shoelace-style/shoelace/dist/components/spinner/spinner';
 import { STATES } from './states';
+import { authorityLogosStyles } from './authority-logos';
 
 const loadingTemplate = () => html`
   <div class="card card-content">
@@ -50,6 +51,7 @@ export class RewiringAmericaStateCalculator extends LitElement {
     utilitySelectorStyles,
     separatorStyles,
     iconTabBarStyles,
+    authorityLogosStyles,
   ];
 
   /* supported properties to control showing/hiding of each card in the widget */

src/state-incentive-details.ts

@@ -3,6 +3,7 @@ import { APIResponse, Incentive, ItemType } from './api/calculator-types-v1';
 import { exclamationPoint, questionIcon, upRightArrow } from './icons';
 import { PROJECTS, Project, shortLabel } from './projects';
 import { iconTabBarTemplate } from './icon-tab-bar';
+import { authorityLogosTemplate } from './authority-logos';
 
 export const stateIncentivesStyles = css`
   .loading {
@@ -430,5 +431,6 @@ export const stateIncentivesTemplate = (
     // If a nonexistent tab is selected, pretend the first one is selected.
     otherTabs.includes(selectedOtherTab) ? selectedOtherTab : otherTabs[0],
     onTabSelected,
-  )}`;
+  )}
+  ${authorityLogosTemplate(response)}`;
 };