Skip to content

Commit

Permalink
Merge in main
Browse files Browse the repository at this point in the history
  • Loading branch information
ayangster committed Sep 27, 2023
2 parents 0a6040d + 488b31f commit df661d1
Show file tree
Hide file tree
Showing 12 changed files with 192 additions and 79 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"default": {
"source": [
"src/calculator.ts",
"src/state-calculator.ts",
"src/rewiring-fonts.css",
"src/index.html",
"src/rhode-island.html"
Expand Down
10 changes: 10 additions & 0 deletions src/api/calculator-types-v1.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
69 changes: 69 additions & 0 deletions src/authority-logos.ts
Original file line number Diff line number Diff line change
@@ -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>
`;
};
4 changes: 2 additions & 2 deletions src/calculator-form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
import { PROJECTS } from './projects';

const buttonStyles = css`
button.calculate {
button.primary {
appearance: none;
font-family: inherit;
font-size: 16px;
Expand All @@ -25,7 +25,7 @@ const buttonStyles = css`
width: 100%;
}
button.calculate:hover {
button.primary:hover {
background-color: var(--ra-embed-primary-button-background-hover-color);
}
Expand Down
2 changes: 2 additions & 0 deletions src/calculator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
} from './calculator-types';
import { CALCULATOR_FOOTER } from './calculator-footer';
import { fetchApi } from './api/fetch';
import { NO_PROJECT } from './projects';

const loadedTemplate = (
results: ICalculatedIncentiveResults,
Expand Down Expand Up @@ -150,6 +151,7 @@ export class RewiringAmericaCalculator extends LitElement {
? nothing
: formTemplate(
[
NO_PROJECT,
this.zip,
this.ownerStatus,
this.householdIncome,
Expand Down
35 changes: 19 additions & 16 deletions src/icon-tab-bar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const iconTabBarStyles = css`
margin-bottom: 1.5rem;
}
button.icon-tab {
.icon-tab {
/* Override default button styles */
background-color: transparent;
font-family: inherit;
Expand All @@ -34,25 +34,25 @@ export const iconTabBarStyles = css`
gap: 0.5rem;
align-items: center;
justify-content: center;
& .caption {
color: var(--color-purple-500, #4a00c3);
font-size: 1rem;
font-weight: 500;
line-height: 125%;
white-space: nowrap;
}
}
button.icon-tab--selected {
.icon-tab--selected {
cursor: default;
background: var(--color-purple-500, #4a00c3);
border-color: var(--color-purple-500, #4a00c3);
}
& .caption {
color: white;
}
.icon-tab__caption {
color: var(--color-purple-500, #4a00c3);
font-size: 1rem;
font-weight: 500;
line-height: 125%;
white-space: nowrap;
}
.icon-tab__caption--selected {
color: white;
}
.icon-dropdown {
Expand Down Expand Up @@ -90,14 +90,17 @@ export const iconTabBarTemplate = (
) => {
const iconTabs = tabs.map(project => {
const isSelected = project === selectedTab;
const selectedClass = isSelected ? 'icon-tab--selected' : '';
const classes = (cls: string) =>
isSelected ? `${cls} ${cls}--selected` : cls;
return html`
<button
class="icon-tab ${selectedClass}"
class="${classes('icon-tab')}"
@click=${() => onTabSelected(project)}
>
${PROJECTS[project].icon(isSelected)}
<div class="caption">${shortLabel(project)}</div>
<div class="${classes('icon-tab__caption')}">
${shortLabel(project)}
</div>
</button>
`;
});
Expand Down
27 changes: 21 additions & 6 deletions src/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,25 @@ export const exclamationPoint = (w: number = 16, h: number = 16) => html`<svg
/>
</svg>`;

export const upRightArrow = (
w: number = 20,
h: number = 20,
) => svg`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 20 20" fill="none">
<path d="M5.83325 14.1667L14.1666 5.83337" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.83325 5.83337H14.1666V14.1667" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
export const upRightArrow = (w: number = 20, h: number = 20) => html`<svg
xmlns="http://www.w3.org/2000/svg"
width="${w}"
height="${h}"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M5.83325 14.1667L14.1666 5.83337"
stroke="#4A00C3"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M5.83325 5.83337H14.1666V14.1667"
stroke="#4A00C3"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>`;
2 changes: 2 additions & 0 deletions src/projects.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@ export type Project =
| 'cooking'
| 'wiring';

export const NO_PROJECT = '';

export const shortLabel = (p: Project) =>
PROJECTS[p].shortLabel ?? PROJECTS[p].label;

Expand Down
19 changes: 11 additions & 8 deletions src/state-calculator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -209,6 +211,7 @@ export class RewiringAmericaStateCalculator extends LitElement {
? nothing
: formTemplate(
[
this.selectedProject,
this.zip,
this.ownerStatus,
this.householdIncome,
Expand Down Expand Up @@ -245,14 +248,14 @@ export class RewiringAmericaStateCalculator extends LitElement {
this._utilitiesTask.status !== TaskStatus.COMPLETE
? nothing
: stateIncentivesTemplate(
results,
this.projects,
newOtherSelection =>
(this.selectedOtherTab = newOtherSelection),
newSelection => (this.selectedProjectTab = newSelection),
this.selectedOtherTab,
this.selectedProjectTab,
),
results,
this.projects,
newOtherSelection =>
(this.selectedOtherTab = newOtherSelection),
newSelection => (this.selectedProjectTab = newSelection),
this.selectedOtherTab,
this.selectedProjectTab,
),
error: errorTemplate,
})}
${CALCULATOR_FOOTER}
Expand Down
7 changes: 3 additions & 4 deletions src/state-incentive-details.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -116,10 +117,8 @@ export const stateIncentivesStyles = css`
}
}
.grid-section {
& .card {
margin: 0;
}
.grid-section .card {
margin: 0;
}
@media only screen and (max-width: 640px) {
Expand Down
23 changes: 16 additions & 7 deletions src/states.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
import { TemplateResult, svg } from 'lit';
import { TemplateResult, html } from 'lit';

const RI_ICON =
() => svg`<svg width="312" height="312" viewBox="0 0 312 312" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M136.455 277.253C136.178 277.443 135.857 277.561 135.521 277.595L130.655 278.081C130.105 278.136 129.556 277.961 129.139 277.596L127.75 276.381C127.454 276.122 127.241 275.781 127.138 275.402L126.511 273.104C126.412 272.743 126.417 272.361 126.525 272.003L127.992 267.113C128.146 266.6 128.499 266.171 128.972 265.92L132.472 264.067C133.127 263.72 133.536 263.04 133.536 262.299V258.925C133.536 257.647 134.788 256.745 136 257.149V257.149C136.765 257.404 137.28 258.119 137.28 258.925V266.151C137.28 266.462 137.353 266.768 137.491 267.046L140.246 272.555C140.692 273.447 140.412 274.532 139.59 275.097L136.455 277.253ZM175.346 188.232C174.682 188.938 173.55 188.903 172.929 188.159V188.159C172.676 187.855 172.543 187.469 172.555 187.074L172.824 178.495C172.839 177.987 173.049 177.503 173.408 177.143L175.178 175.374C175.959 174.593 175.959 173.326 175.178 172.545L174.887 172.255C174.396 171.763 174.195 171.051 174.356 170.375L176.908 159.707C177.218 158.409 178.687 157.774 179.845 158.435L180.889 159.032C181.512 159.388 181.896 160.05 181.896 160.768V167.86C181.896 167.974 181.886 168.088 181.867 168.201L179.191 183.663C179.124 184.05 178.945 184.408 178.676 184.693L175.346 188.232ZM207.488 178.706C207.483 178.868 207.507 179.03 207.558 179.184V179.184C207.915 180.255 206.905 181.279 205.83 180.937L202.834 179.983C202.059 179.737 201.212 179.984 200.691 180.609L194.604 187.913C194.088 188.532 193.251 188.781 192.48 188.544L190.767 188.017C190.102 187.812 189.378 187.968 188.856 188.429L185.289 191.576C184.76 192.043 183.984 192.095 183.397 191.704V191.704C182.867 191.351 182.606 190.711 182.737 190.089L183.583 186.07C183.701 185.511 184.052 185.029 184.548 184.746L190.916 181.107C191.815 180.593 192.174 179.478 191.742 178.537L189.462 173.563C189.215 173.023 189.22 172.402 189.476 171.867L192.309 165.945C192.437 165.675 192.504 165.381 192.504 165.082V160.332C192.504 159.864 192.668 159.411 192.968 159.051L198.447 152.477C198.642 152.242 198.782 151.965 198.854 151.668L201.087 142.456C201.187 142.045 201.414 141.676 201.737 141.402L207.097 136.854C208.548 135.623 210.737 136.924 210.349 138.787L208.452 147.892C208.428 148.006 208.414 148.122 208.411 148.239L207.488 178.706ZM232.078 173.974C232.11 174.559 231.884 175.128 231.46 175.532L221.33 185.18C220.262 186.196 218.499 185.748 218.047 184.346L216.08 178.248C215.965 177.892 215.952 177.511 216.043 177.149L217.056 173.095C217.12 172.842 217.133 172.579 217.095 172.32L213.749 149.507C213.73 149.377 213.724 149.245 213.73 149.114L214.331 137.394C214.34 137.228 214.369 137.063 214.419 136.904L216.53 130.099C216.869 129.008 218.051 128.422 219.124 128.813L229.318 132.519C230.223 132.849 230.765 133.777 230.607 134.728L228.507 147.325C228.428 147.801 228.524 148.29 228.777 148.702L230.614 151.687C230.789 151.971 230.89 152.294 230.908 152.626L232.078 173.974ZM178.041 64.7781C178.107 65.686 178.777 66.4352 179.672 66.6009L184.86 67.5616C185.843 67.7437 186.541 68.6243 186.493 69.6233L185.368 93.2446C185.343 93.7836 185.536 94.31 185.904 94.7044L189.59 98.6539C189.661 98.7295 189.737 98.7996 189.819 98.8634L200.932 107.574C201.136 107.733 201.306 107.931 201.435 108.156L207.159 118.174C207.368 118.539 207.456 118.961 207.411 119.379L206.631 126.66C206.575 127.18 206.318 127.658 205.914 127.991L201.606 131.538C201.366 131.736 201.082 131.875 200.778 131.945L196.266 132.97C195.213 133.209 194.16 132.57 193.887 131.525L192.639 126.738C192.551 126.401 192.552 126.046 192.644 125.71L197.145 109.111C197.349 108.357 196.994 107.564 196.296 107.215V107.215C195.329 106.732 194.167 107.3 193.955 108.36L193.042 112.929C192.776 114.257 191.294 114.943 190.109 114.285L187.065 112.594C186.947 112.528 186.837 112.451 186.735 112.364L182.995 109.158C182.686 108.893 182.465 108.54 182.362 108.147L179.149 95.8811C179.109 95.7259 179.05 95.5762 178.973 95.4352L178.791 95.0985C177.802 93.2738 175.032 93.9759 175.032 96.051V108.931C175.032 109.419 175.21 109.889 175.533 110.255L179.564 114.823C179.662 114.935 179.748 115.058 179.82 115.189L181.084 117.506C181.397 118.081 181.41 118.773 181.117 119.358L177.833 125.926C177.223 127.147 175.595 127.411 174.63 126.445L173.182 124.997C172.963 124.778 172.695 124.612 172.4 124.514L169.302 123.481C168.604 123.249 167.834 123.418 167.298 123.922L164.9 126.18C163.902 127.119 164.123 128.762 165.335 129.404L167.442 130.519C167.907 130.765 168.257 131.185 168.415 131.687L171.436 141.3C171.543 141.643 171.557 142.008 171.475 142.358L170.436 146.77C170.381 147.006 170.282 147.231 170.146 147.432L163.804 156.807C163.414 157.384 163.352 158.122 163.64 158.756L167.686 167.658C167.798 167.904 167.859 168.171 167.865 168.442L168.168 182.384L167.879 187.301C167.864 187.556 167.8 187.806 167.691 188.038L154.764 215.394C154.555 215.836 154.192 216.186 153.744 216.378L152.965 216.712C152.509 216.907 151.996 216.926 151.527 216.765L142.651 213.714C142.401 213.628 142.136 213.592 141.872 213.609L132.877 214.19C132.693 214.202 132.512 214.239 132.339 214.3L96.5551 226.948C96.4573 226.982 96.3571 227.009 96.2552 227.028L80.6803 229.932C79.3522 230.179 78.1657 229.066 78.3283 227.725L80.4596 210.142C80.4839 209.941 80.5384 209.746 80.6212 209.562L83.0119 204.249C83.201 203.829 83.5293 203.487 83.9414 203.281L84.8003 202.852C85.4217 202.541 85.8373 201.93 85.8982 201.238L88.2962 173.96L87.9886 35.2166C87.9862 34.1242 88.8608 33.2319 89.953 33.2125L173.762 31.7212C174.824 31.7023 175.716 32.5174 175.792 33.5771L178.041 64.7781Z" stroke="#F2C72E" stroke-width="2" stroke-linejoin="round"/>
</svg>
`;
const RI_ICON = () => html`<svg
width="312"
height="312"
viewBox="0 0 312 312"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M136.455 277.253C136.178 277.443 135.857 277.561 135.521 277.595L130.655 278.081C130.105 278.136 129.556 277.961 129.139 277.596L127.75 276.381C127.454 276.122 127.241 275.781 127.138 275.402L126.511 273.104C126.412 272.743 126.417 272.361 126.525 272.003L127.992 267.113C128.146 266.6 128.499 266.171 128.972 265.92L132.472 264.067C133.127 263.72 133.536 263.04 133.536 262.299V258.925C133.536 257.647 134.788 256.745 136 257.149V257.149C136.765 257.404 137.28 258.119 137.28 258.925V266.151C137.28 266.462 137.353 266.768 137.491 267.046L140.246 272.555C140.692 273.447 140.412 274.532 139.59 275.097L136.455 277.253ZM175.346 188.232C174.682 188.938 173.55 188.903 172.929 188.159V188.159C172.676 187.855 172.543 187.469 172.555 187.074L172.824 178.495C172.839 177.987 173.049 177.503 173.408 177.143L175.178 175.374C175.959 174.593 175.959 173.326 175.178 172.545L174.887 172.255C174.396 171.763 174.195 171.051 174.356 170.375L176.908 159.707C177.218 158.409 178.687 157.774 179.845 158.435L180.889 159.032C181.512 159.388 181.896 160.05 181.896 160.768V167.86C181.896 167.974 181.886 168.088 181.867 168.201L179.191 183.663C179.124 184.05 178.945 184.408 178.676 184.693L175.346 188.232ZM207.488 178.706C207.483 178.868 207.507 179.03 207.558 179.184V179.184C207.915 180.255 206.905 181.279 205.83 180.937L202.834 179.983C202.059 179.737 201.212 179.984 200.691 180.609L194.604 187.913C194.088 188.532 193.251 188.781 192.48 188.544L190.767 188.017C190.102 187.812 189.378 187.968 188.856 188.429L185.289 191.576C184.76 192.043 183.984 192.095 183.397 191.704V191.704C182.867 191.351 182.606 190.711 182.737 190.089L183.583 186.07C183.701 185.511 184.052 185.029 184.548 184.746L190.916 181.107C191.815 180.593 192.174 179.478 191.742 178.537L189.462 173.563C189.215 173.023 189.22 172.402 189.476 171.867L192.309 165.945C192.437 165.675 192.504 165.381 192.504 165.082V160.332C192.504 159.864 192.668 159.411 192.968 159.051L198.447 152.477C198.642 152.242 198.782 151.965 198.854 151.668L201.087 142.456C201.187 142.045 201.414 141.676 201.737 141.402L207.097 136.854C208.548 135.623 210.737 136.924 210.349 138.787L208.452 147.892C208.428 148.006 208.414 148.122 208.411 148.239L207.488 178.706ZM232.078 173.974C232.11 174.559 231.884 175.128 231.46 175.532L221.33 185.18C220.262 186.196 218.499 185.748 218.047 184.346L216.08 178.248C215.965 177.892 215.952 177.511 216.043 177.149L217.056 173.095C217.12 172.842 217.133 172.579 217.095 172.32L213.749 149.507C213.73 149.377 213.724 149.245 213.73 149.114L214.331 137.394C214.34 137.228 214.369 137.063 214.419 136.904L216.53 130.099C216.869 129.008 218.051 128.422 219.124 128.813L229.318 132.519C230.223 132.849 230.765 133.777 230.607 134.728L228.507 147.325C228.428 147.801 228.524 148.29 228.777 148.702L230.614 151.687C230.789 151.971 230.89 152.294 230.908 152.626L232.078 173.974ZM178.041 64.7781C178.107 65.686 178.777 66.4352 179.672 66.6009L184.86 67.5616C185.843 67.7437 186.541 68.6243 186.493 69.6233L185.368 93.2446C185.343 93.7836 185.536 94.31 185.904 94.7044L189.59 98.6539C189.661 98.7295 189.737 98.7996 189.819 98.8634L200.932 107.574C201.136 107.733 201.306 107.931 201.435 108.156L207.159 118.174C207.368 118.539 207.456 118.961 207.411 119.379L206.631 126.66C206.575 127.18 206.318 127.658 205.914 127.991L201.606 131.538C201.366 131.736 201.082 131.875 200.778 131.945L196.266 132.97C195.213 133.209 194.16 132.57 193.887 131.525L192.639 126.738C192.551 126.401 192.552 126.046 192.644 125.71L197.145 109.111C197.349 108.357 196.994 107.564 196.296 107.215V107.215C195.329 106.732 194.167 107.3 193.955 108.36L193.042 112.929C192.776 114.257 191.294 114.943 190.109 114.285L187.065 112.594C186.947 112.528 186.837 112.451 186.735 112.364L182.995 109.158C182.686 108.893 182.465 108.54 182.362 108.147L179.149 95.8811C179.109 95.7259 179.05 95.5762 178.973 95.4352L178.791 95.0985C177.802 93.2738 175.032 93.9759 175.032 96.051V108.931C175.032 109.419 175.21 109.889 175.533 110.255L179.564 114.823C179.662 114.935 179.748 115.058 179.82 115.189L181.084 117.506C181.397 118.081 181.41 118.773 181.117 119.358L177.833 125.926C177.223 127.147 175.595 127.411 174.63 126.445L173.182 124.997C172.963 124.778 172.695 124.612 172.4 124.514L169.302 123.481C168.604 123.249 167.834 123.418 167.298 123.922L164.9 126.18C163.902 127.119 164.123 128.762 165.335 129.404L167.442 130.519C167.907 130.765 168.257 131.185 168.415 131.687L171.436 141.3C171.543 141.643 171.557 142.008 171.475 142.358L170.436 146.77C170.381 147.006 170.282 147.231 170.146 147.432L163.804 156.807C163.414 157.384 163.352 158.122 163.64 158.756L167.686 167.658C167.798 167.904 167.859 168.171 167.865 168.442L168.168 182.384L167.879 187.301C167.864 187.556 167.8 187.806 167.691 188.038L154.764 215.394C154.555 215.836 154.192 216.186 153.744 216.378L152.965 216.712C152.509 216.907 151.996 216.926 151.527 216.765L142.651 213.714C142.401 213.628 142.136 213.592 141.872 213.609L132.877 214.19C132.693 214.202 132.512 214.239 132.339 214.3L96.5551 226.948C96.4573 226.982 96.3571 227.009 96.2552 227.028L80.6803 229.932C79.3522 230.179 78.1657 229.066 78.3283 227.725L80.4596 210.142C80.4839 209.941 80.5384 209.746 80.6212 209.562L83.0119 204.249C83.201 203.829 83.5293 203.487 83.9414 203.281L84.8003 202.852C85.4217 202.541 85.8373 201.93 85.8982 201.238L88.2962 173.96L87.9886 35.2166C87.9862 34.1242 88.8608 33.2319 89.953 33.2125L173.762 31.7212C174.824 31.7023 175.716 32.5174 175.792 33.5771L178.041 64.7781Z"
stroke="#F2C72E"
stroke-width="2"
stroke-linejoin="round"
/>
</svg> `;

export type StateInfo = {
name: string;
icon: () => TemplateResult<2>;
icon: () => TemplateResult<1>;
};

/**
Expand Down
Loading

0 comments on commit df661d1

Please sign in to comment.