Merge pull request #120 from ScottLogic/sfd-173-external-links

SFD-173 External links replace the Estimator view

src/app/assumptions-and-limitation/assumptions-and-limitation.component.html

@@ -78,15 +78,21 @@ <h4 class="tce-text-lg">Power consumption</h4>
   </table>
   <p class="tce-text-sm">
     In the case of servers and their supporting network devices, we also apply an on-premises
-    <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#power-usage-effectiveness-pue">PUE</a>
+    <a
+      class="tce-underline"
+      href="https://www.techcarbonstandard.org/glossary#power-usage-effectiveness-pue"
+      tce-external-link
+      >PUE</a
+    >
     factor of {{ ON_PREMISE_AVERAGE_PUE }}, based on an average across all data centers.
   </p>
   <h4 class="tce-text-lg">Carbon Intensity</h4>
   <p class="tce-text-sm">
     We make use of the latest available Carbon Intensity figures from
-    <a class="tce-underline" href="https://ember-climate.org/data/data-tools/data-explorer/">Ember</a> via the
-    <a class="tce-underline" href="https://www.thegreenwebfoundation.org/co2-js/">CO2.js</a> library. We limit the range
-    of regions that can be selected, which are currently:
+    <a class="tce-underline" href="https://ember-climate.org/data/data-tools/data-explorer/" tce-external-link>Ember</a>
+    via the
+    <a class="tce-underline" href="https://www.thegreenwebfoundation.org/co2-js/" tce-external-link>CO2.js</a> library.
+    We limit the range of regions that can be selected, which are currently:
   </p>
   <table class="tce-w-fit">
     <thead>
@@ -143,22 +149,26 @@ <h4 class="tce-text-lg">Upstream Emissions</h4>
   </aside>
   <p class="tce-text-sm">
     We use the total Embodied Carbon and the lifespan to give an
-    <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#amortisation">amortised</a> yearly amount
-    of carbon.
+    <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#amortisation" tce-external-link
+      >amortised</a
+    >
+    yearly amount of carbon.
   </p>
   <h4 class="tce-text-lg">Cloud Services</h4>
   <p class="tce-text-sm">
     We have derived average figures to convert from US dollars spent, to kWh of energy and kg of embodied CO2e.
     Beginning with a list of AWS EC2 instance prices, we combined this with
     <a
       class="tce-underline"
-      href="https://github.com/cloud-carbon-footprint/cloud-carbon-coefficients/blob/main/data/aws-instances.csv">
+      href="https://github.com/cloud-carbon-footprint/cloud-carbon-coefficients/blob/main/data/aws-instances.csv"
+      tce-external-link>
       power</a
     >
     and
     <a
       class="tce-underline"
-      href="https://github.com/cloud-carbon-footprint/ccf-coefficients/blob/main/output/coefficients-aws-embodied.csv">
+      href="https://github.com/cloud-carbon-footprint/ccf-coefficients/blob/main/output/coefficients-aws-embodied.csv"
+      tce-external-link>
       embodied</a
     >
     data from Cloud Carbon Footprint's coefficients.<br />
@@ -257,12 +267,15 @@ <h4 class="tce-text-lg">Downstream Emissions</h4>
   <h4 class="tce-text-lg">Network Data Transfer</h4>
   <p class="tce-text-sm">
     Our outgoing network data estimation makes use of the
-    <a href="https://developers.thegreenwebfoundation.org/co2js/overview/">CO2.js</a> library, specifically using the
-    <a href="https://sustainablewebdesign.org/calculating-digital-emissions/">Sustainable Web Design</a> model. This
-    methodology is often used to give an overview of the carbon emissions of an entire website but it can also focus on
-    single components like Network infrastructure. We felt that this was the most appropriate method to use at this
-    point in time, due to the difficulties involved in making a more specific estimation of the Downstream Network
-    infrastructure used by an organisation.
+    <a href="https://developers.thegreenwebfoundation.org/co2js/overview/" tce-external-link>CO2.js</a> library,
+    specifically using the
+    <a href="https://sustainablewebdesign.org/calculating-digital-emissions/" tce-external-link
+      >Sustainable Web Design</a
+    >
+    model. This methodology is often used to give an overview of the carbon emissions of an entire website but it can
+    also focus on single components like Network infrastructure. We felt that this was the most appropriate method to
+    use at this point in time, due to the difficulties involved in making a more specific estimation of the Downstream
+    Network infrastructure used by an organisation.
   </p>
   <h4 class="tce-text-lg">End-User Devices</h4>
   <p class="tce-text-sm">

src/app/assumptions-and-limitation/assumptions-and-limitation.component.ts

@@ -5,6 +5,7 @@ import { PurposeOfSite, WorldLocation, locationArray, purposeOfSiteArray } from
 import { DecimalPipe } from '@angular/common';
 import { CarbonIntensityService } from '../services/carbon-intensity.service';
 import { desktop, laptop, mobile, monitor, network, server, tablet } from '../estimation/device-type';
+import { ExternalLinkDirective } from '../directives/external-link.directive';
 
 const purposeDescriptions: Record<PurposeOfSite, string> = {
   information: 'Information',
@@ -29,7 +30,7 @@ const locationDescriptions: Record<WorldLocation, string> = {
   selector: 'assumptions-and-limitation',
   standalone: true,
   templateUrl: './assumptions-and-limitation.component.html',
-  imports: [DecimalPipe],
+  imports: [DecimalPipe, ExternalLinkDirective],
 })
 export class AssumptionsAndLimitationComponent implements AfterContentInit {
   @Output() public closeEvent = new EventEmitter<boolean>();

src/app/carbon-estimation/carbon-estimation.component.html

@@ -9,14 +9,23 @@ <h2 class="tce-text-2xl">Estimations</h2>
     <div content>
       <p>
         The estimations are divided into 4 categories:
-        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/upstream">Upstream Emissions</a>,
-        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/operational#direct-emissions"
+        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/upstream" tce-external-link
+          >Upstream Emissions</a
+        >,
+        <a
+          class="tce-underline"
+          href="https://www.techcarbonstandard.org/categories/operational#direct-emissions"
+          tce-external-link
           >Operational Direct Emissions</a
         >,
-        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/operational#indirect-emissions"
+        <a
+          class="tce-underline"
+          href="https://www.techcarbonstandard.org/categories/operational#indirect-emissions"
+          tce-external-link
           >Operational Indirect Emissions</a
         >, and
-        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/downstream">Downstream Emissions</a
+        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/downstream" tce-external-link
+          >Downstream Emissions</a
         >.
       </p>
     </div>

src/app/carbon-estimation/carbon-estimation.component.ts

@@ -8,6 +8,7 @@ import { sumValues } from '../utils/number-object';
 import { estimatorHeights } from './carbon-estimation.constants';
 import { debounceTime, fromEvent, Subscription } from 'rxjs';
 import { CarbonEstimationTableComponent } from '../carbon-estimation-table/carbon-estimation-table.component';
+import { ExternalLinkDirective } from '../directives/external-link.directive';
 
 @Component({
   selector: 'carbon-estimation',
@@ -18,6 +19,7 @@ import { CarbonEstimationTableComponent } from '../carbon-estimation-table/carbo
     TabItemComponent,
     CarbonEstimationTreemapComponent,
     CarbonEstimationTableComponent,
+    ExternalLinkDirective,
   ],
   templateUrl: './carbon-estimation.component.html',
   styleUrls: ['./carbon-estimation.component.css'],

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

@@ -283,7 +283,10 @@
         <div content>
           <p class="tce-text-sm">
             This will affect the average
-            <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
+            <a
+              class="tce-underline"
+              href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
+              tce-external-link
               >Carbon Intensity</a
             >
             of the energy used by your {{ helperText }}.

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

@@ -17,6 +17,7 @@ import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.comp
 import { FormatCostRangePipe } from '../pipes/format-cost-range.pipe';
 import { InvalidatedPipe } from '../pipes/invalidated.pipe';
 import { ErrorSummaryComponent } from '../error-summary/error-summary.component';
+import { ExternalLinkDirective } from '../directives/external-link.directive';
 
 @Component({
   selector: 'carbon-estimator-form',
@@ -33,6 +34,7 @@ import { ErrorSummaryComponent } from '../error-summary/error-summary.component'
     FormatCostRangePipe,
     InvalidatedPipe,
     ErrorSummaryComponent,
+    ExternalLinkDirective,
   ],
 })
 export class CarbonEstimatorFormComponent implements OnInit {

src/app/directives/external-link.directive.spec.ts

@@ -0,0 +1,19 @@
+import { ElementRef } from '@angular/core';
+import { ExternalLinkDirective } from './external-link.directive';
+
+describe('ExternalLinkDirective', () => {
+  let element: ElementRef;
+
+  beforeEach(() => {
+    element = {
+      nativeElement: jasmine.createSpyObj('nativeElement', ['setAttribute']),
+    };
+  });
+
+  it('should set required attributes on element', () => {
+    const directive = new ExternalLinkDirective(element);
+    expect(directive).toBeTruthy();
+    expect(element.nativeElement.setAttribute).toHaveBeenCalledWith('target', '_blank');
+    expect(element.nativeElement.setAttribute).toHaveBeenCalledWith('rel', 'noreferrer');
+  });
+});

src/app/directives/external-link.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[tce-external-link]',
+  standalone: true,
+})
+export class ExternalLinkDirective {
+  constructor(private element: ElementRef) {
+    this.element.nativeElement.setAttribute('target', '_blank');
+    this.element.nativeElement.setAttribute('rel', 'noreferrer');
+  }
+}

src/app/disclaimer/disclaimer.component.html

@@ -9,7 +9,10 @@ <h2 class="tce-text-xl">Disclaimer</h2>
       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"
+      <a
+        href="https://github.com/ScottLogic/sl-tech-carbon-estimator/blob/main/TERMS.md"
+        class="tce-underline"
+        tce-external-link
         >terms and conditions</a
       >
       before using this site.

src/app/disclaimer/disclaimer.component.ts

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