Merge pull request #87 from ScottLogic/sfd-120-disclaimer

SFD-120 Add a disclaimer around use of the tool

docs/components.md

@@ -15,6 +15,8 @@ flowchart TB
     assumptions-and-limitation`"]
     Note["`NoteComponent
     note`"]
+    Disclaimer["`DisclaimerComponent
+    disclaimer`"]
     ExpansionPanel["`ExpansionPanelComponent
     expansion-panel`"]
   end
@@ -26,11 +28,11 @@ flowchart TB
     FormatCostRangePipe
   end
 
-  CarbonEstimator --> CarbonEstimatorForm & CarbonEstimation & Assumptions
+  CarbonEstimator --> CarbonEstimatorForm & CarbonEstimation & Assumptions & Disclaimer
   CarbonEstimatorForm ---> FormatCostRangePipe
   CarbonEstimatorForm --> Note
   CarbonEstimator & CarbonEstimatorForm ---> CarbonEstimationService
-  CarbonEstimatorForm & CarbonEstimation --> ExpansionPanel
+  CarbonEstimatorForm & CarbonEstimation & Disclaimer --> ExpansionPanel
   CarbonEstimationService & Assumptions --> CarbonIntensityService
 ```
 
@@ -59,6 +61,10 @@ Uses the [CarbonIntensityService](services.md#carbonintensityservice) to get the
 
 Highlights assumptions that will be made when certain options are selected.
 
+## DisclaimerComponent
+
+Displays disclaimer about how the tool should be used.
+
 ## ExpansionPanelComponent
 
 Displays explanatory text that can be hidden if desired.

src/app/disclaimer/disclaimer.component.html

@@ -0,0 +1,18 @@
+<expansion-panel class="tce-flex tce-justify-between tce-gap-2 tce-flex-col tce-pb-4">
+  <div header>
+    <h2 class="tce-text-xl">Disclaimer</h2>
+  </div>
+  <div content>
+    <p class="tce-text-sm">
+      This tool is provided free of charge to assist you in identifying and measuring your carbon footprint, for
+      information and guidance only. The scores and information provided should not be used for carbon reporting and are
+      made available on an “as is” basis. Scott Logic Limited accepts no liability or responsibility for any use made by
+      any person or organisation of the information or calculations available on this website. Any reliance placed on
+      this website is taken at your own risk. You should read our full website
+      <a href="https://github.com/ScottLogic/sl-tech-carbon-estimator/blob/main/TERMS.md" class="tce-underline"
+        >terms and conditions</a
+      >
+      before using this site.
+    </p>
+  </div>
+</expansion-panel>

src/app/disclaimer/disclaimer.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DisclaimerComponent } from './disclaimer.component';
+
+describe('DisclaimerComponent', () => {
+  let component: DisclaimerComponent;
+  let fixture: ComponentFixture<DisclaimerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DisclaimerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DisclaimerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/disclaimer/disclaimer.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.component';
+
+@Component({
+  selector: 'disclaimer',
+  standalone: true,
+  imports: [ExpansionPanelComponent],
+  templateUrl: './disclaimer.component.html',
+})
+export class DisclaimerComponent {}

src/app/tech-carbon-estimator/tech-carbon-estimator.component.html

@@ -1,19 +1,20 @@
 <div id="techCarbonEstimator" class="tce-flex tce-flex-col tce-px-4 tce-pt-4 md:tce-pb-4 tce-h-full">
   <h1 class="tce-text-3xl tce-mb-6">Technology Carbon Estimator</h1>
   <div class="tce-flex tce-w-full tce-grow tce-flex-wrap md:tce-flex-nowrap">
-    @if (showAssumptionsAndLimitationView) {
-      <assumptions-and-limitation
-        #assumptionsLimitation
-        aria-live="polite"
-        (closeEvent)="closeAssumptionsAndLimitation($event)"
-        class="tce-w-full md:tce-w-1/2 tce-pb-4 md:tce-pb-0 md:tce-pr-4"></assumptions-and-limitation>
-    } @else {
-      <carbon-estimator-form
-        [formValue]="formValue"
-        (formSubmit)="handleFormSubmit($event)"
-        (formReset)="handleFormReset()"
-        class="tce-w-full md:tce-w-1/2 tce-pb-4 md:tce-pb-0 md:tce-pr-4"></carbon-estimator-form>
-    }
+    <div class="tce-w-full md:tce-w-1/2 tce-pb-4 md:tce-pb-0 md:tce-pr-4">
+      <disclaimer></disclaimer>
+      @if (showAssumptionsAndLimitationView) {
+        <assumptions-and-limitation
+          #assumptionsLimitation
+          aria-live="polite"
+          (closeEvent)="closeAssumptionsAndLimitation($event)"></assumptions-and-limitation>
+      } @else {
+        <carbon-estimator-form
+          [formValue]="formValue"
+          (formSubmit)="handleFormSubmit($event)"
+          (formReset)="handleFormReset()"></carbon-estimator-form>
+      }
+    </div>
     @if (showEstimation) {
       <div
         #estimations

src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts

@@ -6,6 +6,7 @@ import { CarbonEstimationService } from '../services/carbon-estimation.service';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { AssumptionsAndLimitationComponent } from '../assumptions-and-limitation/assumptions-and-limitation.component';
+import { DisclaimerComponent } from '../disclaimer/disclaimer.component';
 
 @Component({
   selector: 'tech-carbon-estimator',
@@ -16,6 +17,7 @@ import { AssumptionsAndLimitationComponent } from '../assumptions-and-limitation
     FormsModule,
     CommonModule,
     AssumptionsAndLimitationComponent,
+    DisclaimerComponent,
   ],
   templateUrl: './tech-carbon-estimator.component.html',
 })