From 488b31f89d602fe3335358c7a50cec29481ee1f5 Mon Sep 17 00:00:00 2001
From: Owen Yamauchi <owen@rewiringamerica.org>
Date: Wed, 27 Sep 2023 10:19:25 -0400
Subject: [PATCH] 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 | 10 +++++
 src/authority-logos.ts         | 69 ++++++++++++++++++++++++++++++++++
 src/state-calculator.ts        |  2 +
 src/state-incentive-details.ts |  4 +-
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/authority-logos.ts

diff --git a/src/api/calculator-types-v1.ts b/src/api/calculator-types-v1.ts
index 866e4d1..5d3a232 100644
--- a/src/api/calculator-types-v1.ts
+++ b/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;
diff --git a/src/authority-logos.ts b/src/authority-logos.ts
new file mode 100644
index 0000000..dd92763
--- /dev/null
+++ b/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>
+  `;
+};
diff --git a/src/state-calculator.ts b/src/state-calculator.ts
index df23cc7..f7609f5 100644
--- a/src/state-calculator.ts
+++ b/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 */
diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
index e277eea..87917de 100644
--- a/src/state-incentive-details.ts
+++ b/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)}`;
 };