From 464e90116e1bccd5c150d20bce0fe036477e74f2 Mon Sep 17 00:00:00 2001
From: Spencer Peace <spencer.peace@digitalservice.bund.de>
Date: Tue, 24 Dec 2024 10:00:14 +0100
Subject: [PATCH] fix(Inline SVG Fixes)

---
 app/components/Image.tsx               |  3 ++-
 app/components/__test__/Image.test.tsx | 28 ++++++++++++++++++++++++++
 data/opensource-licenses.json          | 25 +++++++++++++++++++++++
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 app/components/__test__/Image.test.tsx

diff --git a/app/components/Image.tsx b/app/components/Image.tsx
index b015e50da..7311314b4 100644
--- a/app/components/Image.tsx
+++ b/app/components/Image.tsx
@@ -16,11 +16,12 @@ function Image({ url, width, height, alternativeText, ...props }: ImageProps) {
   return isSvg ? (
     <SVG
       {...props}
+      id="svg-image"
       src={url}
       width={width}
       title={alternativeText}
       role="img"
-      height={"auto"}
+      height="100%"
     />
   ) : (
     <img
diff --git a/app/components/__test__/Image.test.tsx b/app/components/__test__/Image.test.tsx
new file mode 100644
index 000000000..40858b06d
--- /dev/null
+++ b/app/components/__test__/Image.test.tsx
@@ -0,0 +1,28 @@
+import { render } from "@testing-library/react";
+import Image from "../Image";
+
+describe("Image", () => {
+  const altText = "Alt Text";
+  it("should not render if the url is not provided", () => {
+    const { queryByAltText } = render(<Image alternativeText={altText} />);
+    expect(queryByAltText(altText)).not.toBeInTheDocument();
+  });
+
+  it("should render an image as an <img> tag", () => {
+    const { getByAltText } = render(
+      <Image url="photo.jpg" alternativeText={altText} />,
+    );
+    const image = getByAltText(altText);
+    expect(image).toBeInTheDocument();
+    expect(image).toBeInstanceOf(HTMLImageElement);
+  });
+
+  it("should render an svg image inline instead of as an <img> tag", () => {
+    const { queryByAltText } = render(
+      <Image url="image.svg" alternativeText={altText} ext=".svg" />,
+    );
+    // since react-inlinesvg parses an actual svg to create the DOM,
+    // we basically just need to ensure that an <img> isn't present
+    expect(queryByAltText(altText)).not.toBeInTheDocument();
+  });
+});
diff --git a/data/opensource-licenses.json b/data/opensource-licenses.json
index 66ba43314..58a0f1db3 100644
--- a/data/opensource-licenses.json
+++ b/data/opensource-licenses.json
@@ -236,6 +236,14 @@
     "licenseFile": "a2j-rechtsantragstelle/node_modules/mustache/LICENSE",
     "direct": true
   },
+  "node-forge": {
+    "licenses": "(BSD-3-Clause OR GPL-2.0)",
+    "repository": "https://github.com/digitalbazaar/forge",
+    "publisher": "Digital Bazaar, Inc.",
+    "email": "support@digitalbazaar.com",
+    "path": "a2j-rechtsantragstelle/node_modules/node-forge",
+    "licenseFile": "a2j-rechtsantragstelle/node_modules/node-forge/LICENSE"
+  },
   "pako": {
     "licenses": "(MIT AND Zlib)",
     "repository": "https://github.com/nodeca/pako",
@@ -309,6 +317,15 @@
     "licenseFile": "a2j-rechtsantragstelle/node_modules/react-imask/LICENSE",
     "direct": true
   },
+  "react-inlinesvg": {
+    "licenses": "MIT",
+    "repository": "https://github.com/gilbarbara/react-inlinesvg",
+    "publisher": "Gil Barbara",
+    "email": "gilbarbara@gmail.com",
+    "path": "a2j-rechtsantragstelle/node_modules/react-inlinesvg",
+    "licenseFile": "a2j-rechtsantragstelle/node_modules/react-inlinesvg/LICENSE",
+    "direct": true
+  },
   "react-select": {
     "licenses": "MIT",
     "repository": "https://github.com/JedWatson/react-select.git#master",
@@ -333,6 +350,14 @@
     "licenseFile": "a2j-rechtsantragstelle/node_modules/remix-validated-form/README.md",
     "direct": true
   },
+  "samlify": {
+    "licenses": "MIT",
+    "repository": "https://github.com/tngan/samlify",
+    "publisher": "tngan",
+    "path": "a2j-rechtsantragstelle/node_modules/samlify",
+    "licenseFile": "a2j-rechtsantragstelle/node_modules/samlify/LICENSE",
+    "direct": true
+  },
   "tiny-invariant": {
     "licenses": "MIT",
     "repository": "https://github.com/alexreardon/tiny-invariant",