Finalize integration of multiselect into state calculator

package.json

@@ -35,7 +35,6 @@
     "cypress": "^12.6.0",
     "eslint": "^8.45.0",
     "parcel": "v2.8.3",
-    "parcel-reporter-static-files-copy": "^1.5.2",
     "postcss": "^8.4.21",
     "postcss-modules": "^6.0.0",
     "posthtml": "^0.16.6",

src/calculator-form.ts

@@ -96,7 +96,9 @@ export const formTemplate = (
               .map(([value, data]) => ({ value, label: data.label }))
               .sort((a, b) => a.label.localeCompare(b.label)),
             currentValues: projects,
+            placeholder: 'None selected',
             maxOptionsVisible: 1,
+            placement: 'top',
           })}
         </label>
       </div> `

src/select.ts

@@ -20,13 +20,24 @@ export interface SelectParam {
   disabled?: boolean;
 }
 
-export interface MultiSelectParam {
+export interface SLSelectParam {
   id: string;
   label?: string;
-  currentValues: string[];
   options: OptionParam[];
   helpText?: string;
   placeholder?: string;
+  placement?: string;
+  required?: boolean;
+  ariaLabel?: string;
+}
+
+export interface SingleSelectParam extends SLSelectParam {
+  currentValue: string;
+  onChange?: (event: SlChangeEvent) => void;
+}
+
+export interface MultiSelectParam extends SLSelectParam {
+  currentValues: string[];
   maxOptionsVisible?: number;
 }
 
@@ -72,6 +83,7 @@ export const multiselect = ({
   helpText,
   placeholder,
   maxOptionsVisible,
+  placement,
 }: MultiSelectParam) => {
   return html`
     <div>
@@ -83,10 +95,12 @@ export const multiselect = ({
         help-text="${ifDefined(helpText)}"
         placeholder="${ifDefined(placeholder)}"
         max-options-visible="${ifDefined(maxOptionsVisible)}"
+        placement="${ifDefined(placement)}"
+        hoist
         multiple
         clearable
       >
-        <sl-icon slot="expand-icon" name="caret-down-fill"></sl-icon>
+        <sl-icon slot="expand-icon"></sl-icon>
         ${options.map(o => multioption(o))}
       </sl-select>
       <span class="focus"></span>
@@ -223,6 +237,9 @@ export const selectStyles = css`
 
   sl-select {
     --sl-input-height-medium: 2.8215rem;
+
+    --sl-input-font-family: var(--ra-embed-font-family);
+
     --sl-input-focus-ring-color: var(--select-focus);
     --sl-input-focus-ring-style: solid;
     --sl-focus-ring-width: 1px;
@@ -260,7 +277,11 @@ export const selectStyles = css`
   }
 
   sl-select::part(expand-icon) {
-    width: 0.75em;
-    height: 0.5em;
+    content: '';
+    justify-self: end;
+    width: 0.6em;
+    height: 0.4em;
+    background-color: var(--select-arrow);
+    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
   }
 `;

src/state-calculator.ts

@@ -100,10 +100,10 @@ export class RewiringAmericaStateCalculator extends LitElement {
   utility: string = '';
 
   @property({ type: Array })
-  projects: Project[] = ['battery'];
+  projects: Project[] = [];
 
   @property({ type: String })
-  selectedProjectTab: Project = 'battery';
+  selectedProjectTab: Project | undefined;
 
   @property({ type: String })
   selectedOtherTab: Project = 'battery';
@@ -247,10 +247,11 @@ export class RewiringAmericaStateCalculator extends LitElement {
               : stateIncentivesTemplate(
                   results,
                   this.projects,
-                  this.selectedProjectTab,
-                  this.selectedOtherTab,
+                  newOtherSelection =>
+                    (this.selectedOtherTab = newOtherSelection),
                   newSelection => (this.selectedProjectTab = newSelection),
-                  newOtherSelection => (this.selectedOtherTab = newOtherSelection),
+                  this.selectedOtherTab,
+                  this.selectedProjectTab,
                 ),
           error: errorTemplate,
         })}

src/state-incentive-details.ts

@@ -394,10 +394,10 @@ const gridTemplate = (
 export const stateIncentivesTemplate = (
   response: APIResponse,
   selectedProjects: Project[],
-  selectedProjectTab: Project,
-  selectedOtherTab: Project,
-  onTabSelected: (newSelection: Project) => void,
   onOtherTabSelected: (newOtherSelection: Project) => void,
+  onTabSelected: (newSelection: Project) => void,
+  selectedOtherTab: Project,
+  selectedProjectTab?: Project,
 ) => {
   const allEligible = response.incentives.filter(i => i.eligible);
 
@@ -419,16 +419,23 @@ export const stateIncentivesTemplate = (
     .sort(([a], [b]) => shortLabel(a).localeCompare(shortLabel(b)))
     .map(([project]) => project);
 
+  const projectTab = selectedProjectTab ?? selectedProjects[0];
+  const selectedIncentives = incentivesByProject[projectTab] ?? [];
+  const otherIncentivesLabel =
+    selectedIncentives.length == 0
+      ? 'Incentives available to you'
+      : 'Other incentives available to you';
+
   return html` ${atAGlanceTemplate(response)}
   ${gridTemplate(
     "Incentives you're interested in",
-    incentivesByProject[selectedProjectTab] ?? [],
+    selectedIncentives,
     selectedProjects,
-    selectedProjects.includes(selectedProjectTab) ? selectedProjectTab : selectedProjects[0],
+    selectedProjects.includes(projectTab) ? projectTab : selectedProjects[0],
     onTabSelected,
   )}
   ${gridTemplate(
-    'Other incentives available to you',
+    otherIncentivesLabel,
     incentivesByProject[selectedOtherTab] ?? [],
     otherTabs,
     // If a nonexistent tab is selected, pretend the first one is selected.