Make tooltips toggle option (#57)

* Make tooltips a toggle option * Add explicit type to button configs * Restyle question clarification expansion panels * Remove HelperInfo component and @nctate/sat-popover dependency * Move questionPanelConfig to CarbonEstimatorForm * Make ExpansionPanelConfig immutable * Use non-null assertion operator for declaring fields set in ngOnInit * Remove HelperComponent from doc diagram and remove its descrCiption section
ScottLogic · May 13, 2024 · 6957afc · 6957afc
1 parent 9a9cd2f
commit 6957afc
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 104 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,10 +2,5 @@
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "editor.tabSize": 2,
   "files.eol": "\n",
-  "cSpell.words": [
-    "apexcharts",
-    "ncstate",
-    "popover",
-    "treemap"
-  ]
+  "cSpell.words": ["apexcharts", "treemap"]
 }
diff --git a/docs/components.md b/docs/components.md
@@ -13,8 +13,6 @@ flowchart TB
     carbon-estimation`"]
     Assumptions["`AssumptionsAndLimitationComponent
     assumptions-and-limitation`"]
-    HelperInfo["`HelperInfoComponent
-    helper-info`"]
     Note["`NoteComponent
     note`"]
     ExpansionPanel["`ExpansionPanelComponent
@@ -30,7 +28,7 @@ flowchart TB
 
   CarbonEstimator --> CarbonEstimatorForm & CarbonEstimation & Assumptions
   CarbonEstimatorForm ---> FormatCostRangePipe
-  CarbonEstimatorForm --> HelperInfo & Note
+  CarbonEstimatorForm --> Note
   CarbonEstimator & CarbonEstimatorForm ---> CarbonEstimationService
   CarbonEstimatorForm & CarbonEstimation --> ExpansionPanel
   CarbonEstimationService & Assumptions --> CarbonIntensityService
@@ -57,10 +55,6 @@ Visualises the Carbon Estimation result.
 Provides information on the Assumptions and Limitations of the estimation.  
 Uses the [CarbonIntensityService](services.md#carbonintensityservice) to get the latest carbon intensity figures to display.
 
-## HelperInfoComponent
-
-Displays a help button which can be clicked to show extra details on how the form inputs are used.
-
 ## NoteComponent
 
 Highlights assumptions that will be made when certain options are selected.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,6 @@
     "@angular/platform-browser": "^17.2.0",
     "@angular/platform-browser-dynamic": "^17.2.0",
     "@angular/router": "^17.2.0",
-    "@ncstate/sat-popover": "^11.0.0",
     "@tgwf/co2": "^0.14.3",
     "lodash-es": "^4.17.21",
     "ng-apexcharts": "^1.9.0",

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.html b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
@@ -155,21 +155,22 @@
 
       @if (!noDownstream) {
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <div class="tce-flex">
-            <label for="purposeOfSite" class="tce-text-sm tce-text-slate-600"
-              >What's the primary purpose of your digital services?</label
-            >
-            <helper-info class="tce-ml-auto" inputLabel="What's the purpose of your website">
+          <expansion-panel [configOverride]="questionPanelConfig">
+            <div header>
+              <div class="tce-flex">
+                <label for="purposeOfSite" class="tce-text-sm tce-text-slate-600"
+                  >What's the primary purpose of your digital services?</label
+                >
+              </div>
+            </div>
+            <div content>
               <p class="tce-text-sm tce-text-slate-600">
                 The purpose of your digital services is used to determine the typical amount of time a user might spend
-                on them and the amount of data that may be transferred.
+                on them and the amount of data that may be transferred. This can affect the amount of energy used by end
+                user devices and how much energy from network traffic is attributable to your organisation
               </p>
-              <p class="tce-text-sm tce-text-slate-600">
-                This can affect the amount of energy used by end user devices and how much energy from network traffic
-                is attributable to your organisation
-              </p>
-            </helper-info>
-          </div>
+            </div>
+          </expansion-panel>
           <select
             class="tce-border tce-border-slate-400 tce-rounded"
             formControlName="purposeOfSite"
@@ -198,23 +199,22 @@
         </div>
 
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <div class="tce-flex">
-            <label for="mobilePercentage" class="tce-text-sm tce-text-slate-600">
-              What percentage of your end-users are mobile or personal computer users?
-            </label>
-            <helper-info
-              class="tce-ml-auto"
-              inputLabel="What percentage of your users are mobile or personal computer users">
+          <expansion-panel [configOverride]="questionPanelConfig">
+            <div header>
+              <div class="tce-flex">
+                <label for="mobilePercentage" class="tce-text-sm tce-text-slate-600">
+                  What percentage of your end-users are mobile or personal computer users?
+                </label>
+              </div>
+            </div>
+            <div content>
               <p class="tce-text-sm tce-text-slate-600">
                 The percentage of mobile users will affect the energy used by end user devices and network
-                infrastructure.
-              </p>
-              <p class="tce-text-sm tce-text-slate-600">
-                While the power demand of mobile devices is often much lower, the use of mobile networks can increase
-                the power used when transferring data.
+                infrastructure. While the power demand of mobile devices is often much lower, the use of mobile networks
+                can increase the power used when transferring data.
               </p>
-            </helper-info>
-          </div>
+            </div>
+          </expansion-panel>
           <input
             id="mobilePercentage"
             formControlName="mobilePercentage"
@@ -256,20 +256,22 @@
     let-formControlName="location.formControlName"
     let-formGroupName="formGroupName">
     <div formGroupName="{{ formGroupName }}" class="tce-flex tce-flex-col tce-gap-2">
-      <div class="tce-flex">
-        <label for="{{ formControlName }}" class="tce-text-sm tce-text-slate-600">{{ label }} </label>
-        @if (helperText) {
-          <helper-info class="tce-ml-auto" [inputLabel]="label">
-            <p class="tce-text-sm tce-text-slate-600">
-              This will affect the average
-              <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
-                >Carbon Intensity</a
-              >
-              of the energy used by your {{ helperText }}.
-            </p>
-          </helper-info>
-        }
-      </div>
+      <expansion-panel [configOverride]="questionPanelConfig">
+        <div header>
+          <div class="tce-flex">
+            <label for="{{ formControlName }}" class="tce-text-sm tce-text-slate-600">{{ label }} </label>
+          </div>
+        </div>
+        <div content>
+          <p class="tce-text-sm tce-text-slate-600">
+            This will affect the average
+            <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
+              >Carbon Intensity</a
+            >
+            of the energy used by your {{ helperText }}.
+          </p>
+        </div>
+      </expansion-panel>
       <select
         class="tce-border tce-border-slate-400 tce-rounded tce-px-3 tce-py-2"
         name="{{ formControlName }}"

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.ts b/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
@@ -2,12 +2,11 @@ import { CommonModule, JsonPipe } from '@angular/common';
 import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output, input } from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { EstimatorFormValues, EstimatorValues, WorldLocation, locationArray } from '../types/carbon-estimator';
-import { costRanges, defaultValues, formContext } from './carbon-estimator-form.constants';
+import { costRanges, defaultValues, formContext, questionPanelConfig } from './carbon-estimator-form.constants';
 import { NoteComponent } from '../note/note.component';
 import { CarbonEstimationService } from '../services/carbon-estimation.service';
 import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.component';
 import { FormatCostRangePipe } from '../pipes/format-cost-range.pipe';
-import { HelperInfoComponent } from '../helper-info/helper-info.component';
 
 const locationDescriptions: Record<WorldLocation, string> = {
   WORLD: 'Globally',
@@ -31,7 +30,6 @@ const locationDescriptions: Record<WorldLocation, string> = {
     JsonPipe,
     FormsModule,
     CommonModule,
-    HelperInfoComponent,
     NoteComponent,
     ExpansionPanelComponent,
     FormatCostRangePipe,
@@ -67,6 +65,8 @@ export class CarbonEstimatorFormComponent implements OnInit {
     description: locationDescriptions[location],
   }));
 
+  public questionPanelConfig = questionPanelConfig;
+
   constructor(
     private formBuilder: FormBuilder,
     private changeDetector: ChangeDetectorRef,

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts b/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts
@@ -1,3 +1,4 @@
+import { ExpansionPanelConfig } from '../expansion-panel/expansion-panel.constants';
 import { CostRange, EstimatorValues } from '../types/carbon-estimator';
 
 export const costRanges: CostRange[] = [
@@ -90,3 +91,9 @@ export const formContext = {
     },
   },
 };
+
+export const questionPanelConfig: ExpansionPanelConfig = {
+  startsExpanded: false,
+  buttonStyles: 'material-icons-outlined tce-text-base tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  contentContainerStyles: 'tce-px-3 tce-py-2 tce-bg-slate-100 tce-border tce-border-slate-400 tce-rounded tce-text-sm',
+};
diff --git a/src/app/expansion-panel/expansion-panel.component.html b/src/app/expansion-panel/expansion-panel.component.html
@@ -4,11 +4,11 @@
     type="button"
     (click)="toggle()"
     (keydown.enter)="toggle()"
-    class="material-icons-outlined tce-text tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded"
+    [class]="config.buttonStyles"
     [attr.aria-label]="expanded ? 'Hide details' : 'Show details'">
     {{ expanded ? 'expand_less' : 'expand_more' }}
   </button>
 </div>
-<div [ngClass]="{ 'tce-hidden': !expanded }" role="region">
+<div [ngClass]="{ 'tce-hidden': !expanded }" [class]="config.contentContainerStyles" role="region">
   <ng-content select="[content]"></ng-content>
 </div>
diff --git a/src/app/expansion-panel/expansion-panel.component.ts b/src/app/expansion-panel/expansion-panel.component.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ExpansionPanelConfig, defaultConfig } from './expansion-panel.constants';
 
 @Component({
   selector: 'expansion-panel',
@@ -8,12 +9,22 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angul
   templateUrl: './expansion-panel.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ExpansionPanelComponent {
+export class ExpansionPanelComponent implements OnInit {
+  @Input() configOverride?: Partial<ExpansionPanelConfig> = {};
   @Output() expandedChanged = new EventEmitter<void>();
-  public expanded: boolean = true;
+  public config!: ExpansionPanelConfig;
+  public expanded!: boolean;
 
   toggle() {
     this.expanded = !this.expanded;
     this.expandedChanged.emit();
   }
+
+  ngOnInit(): void {
+    this.config = {
+      ...defaultConfig,
+      ...this.configOverride,
+    };
+    this.expanded = this.config.startsExpanded;
+  }
 }
diff --git a/src/app/expansion-panel/expansion-panel.constants.ts b/src/app/expansion-panel/expansion-panel.constants.ts
@@ -0,0 +1,11 @@
+export type ExpansionPanelConfig = {
+  readonly startsExpanded: boolean;
+  readonly buttonStyles: string;
+  readonly contentContainerStyles: string;
+};
+
+export const defaultConfig: ExpansionPanelConfig = {
+  startsExpanded: true,
+  buttonStyles: 'material-icons-outlined tce-text tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  contentContainerStyles: '',
+};
diff --git a/src/app/helper-info/helper-info.component.html b/src/app/helper-info/helper-info.component.html
diff --git a/src/app/helper-info/helper-info.component.ts b/src/app/helper-info/helper-info.component.ts