feat(ui): add NATO D32 compliance icon (#13174)

ui/changelog.d/nato-d32-compliance-icon.added.md

@@ -0,0 +1 @@
+Icon for the NATO D32 compliance framework on the compliance cards

ui/components/icons/compliance/IconCompliance.test.ts

@@ -94,6 +94,18 @@ describe("getComplianceIcon", () => {
       expect(getComplianceIcon("nist_800_53_revision_5_aws")).toBe(nistLogo);
     });
 
+    it("resolves NATO D32 by its id, its framework and its title", () => {
+      const natoLogo = getComplianceIcon("nato_cloud_directive_rev1");
+      expect(natoLogo).toBeDefined();
+      expect(getComplianceIcon("NATO-Cloud-Directive")).toBe(natoLogo);
+      expect(
+        getComplianceIcon(
+          "NATO D32 (AC/322-D(2021)0032-REV1) - NATO Restricted baseline",
+        ),
+      ).toBe(natoLogo);
+      expect(getComplianceIcon("nato_cloud_directive_rev1_aws")).toBe(natoLogo);
+    });
+
     it("resolves PCI/HIPAA/GDPR/SOC2/ENS/FedRAMP/MITRE/RBI/KISA/SecNumCloud by their framework keyword", () => {
       // Spot-check the rest of the framework keywords against AWS-suffixed ids.
       // Each must resolve to a distinct logo from `aws` so the watchlist

ui/components/icons/compliance/IconCompliance.tsx

@@ -18,6 +18,7 @@ import HIPAALogo from "./hipaa.svg";
 import ISOLogo from "./iso-27001.svg";
 import KISALogo from "./kisa.svg";
 import MITRELogo from "./mitre-attack.svg";
+import NATOLogo from "./nato.svg";
 import NIS2Logo from "./nis2.svg";
 import NISTLogo from "./nist.svg";
 import OktaLogo from "./okta.svg";
@@ -87,6 +88,9 @@ const COMPLIANCE_LOGOS = [
   // The compliance_id is `dora_2022_2554`; the `dora` keyword still matches
   // it via `includes`, with no provider suffix.
   ["dora", DORALogo],
+  // Matches the id `nato_cloud_directive_rev1` and the framework
+  // `NATO-Cloud-Directive` that the cards pass.
+  ["nato", NATOLogo],
   ["secnumcloud", ANSSILogo],
   ["okta", OktaLogo],
   ["aws", AWSLogo],

ui/components/icons/compliance/nato.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 170" fill="none">
+  <defs>
+    <linearGradient id="natoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#004990"/>
+      <stop offset="100%" style="stop-color:#1A6FC4"/>
+    </linearGradient>
+  </defs>
+  <g>
+    <rect x="0" y="20" width="400" height="130" rx="16" fill="url(#natoGradient)"/>
+    <text x="200" y="100" font-family="Helvetica, Arial, sans-serif" font-size="76" font-weight="700" fill="#FFFFFF" text-anchor="middle" letter-spacing="6">NATO</text>
+    <text x="200" y="135" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="500" fill="#F2F8FF" text-anchor="middle" letter-spacing="3">D32 CLOUD DIRECTIVE</text>
+  </g>
+</svg>