From c65e2e1bfdd5b865219bfb623609161bdecda7a9 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 11:48:55 -0700
Subject: [PATCH 01/12] Added working USWDS CDNs and start styling update

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 index.html | 79 ++++++++++++++++++++++--------------------------------
 1 file changed, 32 insertions(+), 47 deletions(-)
diff --git a/index.html b/index.html
index 6dc24ba..505b24e 100644
--- a/index.html
+++ b/index.html
@@ -1,29 +1,17 @@
 <html>
+<meta charset="UTF-8">
 
 <head>
-	<meta charset="utf-8">
-	<!-- USWDS not working -->
-	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
-	<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
-	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css"> -->
-	<!-- <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css"> -->
-	<!-- <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css"> -->
-	<!-- <link rel="stylesheet" href="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.css"> -->
-	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script> -->
-	<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script> -->
-	<!-- <script src="https://cdn.form.io/uswds/uswds.min.js"></script> -->
-	<!-- <script src="https://cdn.form.io/formiojs/formio.full.js"></script> -->
-	<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
-
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
-
-	<!-- Uses bootstrap for now -->
-	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
 	<link rel="stylesheet" href="css/styles.css">
 
-	<!-- Working Form.io CDN -->
-	<script src="https://unpkg.com/formiojs@4.21.6/dist/formio.full.min.js"></script>
-	<link href="https://cdn.jsdelivr.net/npm/formiojs@4.21.6/dist/formio.full.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
+	<link rel="stylesheet" href="https://cdn.form.io/js/formio.form.min.css">
+	<link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
+	<script src="https://cdn.form.io/js/formio.form.min.js"></script>
+	<script src="https://cdn.form.io/uswds/uswds.min.js"></script>
 
 	<!-- Render the form -->
 	<script src="js/generateFormComponents.js"></script>
@@ -33,20 +21,14 @@
 	<script type="text/javascript">
 		createFormComponents()
 			.then((components) => {
+				Formio.use(uswds);
 				Formio.createForm(document.getElementById("formio"), {
 					display: "form",
-					theme: "primary",
-					settings: {
-						pdf: {
-							id: "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
-							src: "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
-						},
-					},
 					components: components,
 				}).then(function (form) {
 					window.formIOInstance = form;
 					form.on("submit", function (submission) {
-						console.log("form submission here:", submission);
+						console.log("Form Submission here:", submission);
 						createCodeJson(submission.data);
 					});
 				});
@@ -64,7 +46,7 @@
 		<div class="exemptions-header">
 			<div class="step-header">
 				<div class="step-number">1</div>
-				<h3>Identify your project's classification</h3>
+				<h2>Identify your project's classification</h2>
 			</div>
 		</div>
 		<div id="exemptions-quiz-container" class="exemptions-quiz-container">
@@ -76,34 +58,35 @@ <h4 id="quiz-subheading">
 					<div class="usa-radio">
 						<input class="usa-radio__input usa-radio__input--tile" id="check-open-source" type="radio"
 							name="exemption-condition" value="openSource" />
-						<label class="usa-radio__label" for="check-open-source">Open Source</label>
-						<span class="usa-checkbox__label-description">This project is publicly available
-							and licensed under terms that allow others to use, modify, and distribute it (e.g.
-							github.com)</span></label>
+						<label class="usa-radio__label" for="check-open-source">Open Source
+							<span class="usa-checkbox__label-description">This project is publicly available
+								and licensed under terms that allow others to use, modify, and distribute it (e.g.
+								github.com)</span></label>
 					</div>
 					<div class="usa-radio">
 						<input class="usa-radio__input usa-radio__input--tile" id="check-govt-reuse" type="radio"
 							name="exemption-condition" value="governmentWideReuse" />
-						<label class="usa-radio__label" for="check-govt-reuse">Government Wide Reuse</label>
-						<span class="usa-checkbox__label-description">The project is available internally for government
-							wide use (e.g. github.cms.gov)</span></label>
+						<label class="usa-radio__label" for="check-govt-reuse">Government Wide Reuse
+							<span class="usa-checkbox__label-description">The project is available internally for
+								government wide use (e.g. github.cms.gov)</span></label>
 					</div>
 					<div class="usa-radio">
 						<input class="usa-radio__input usa-radio__input--tile" id="check-exempt" type="radio"
 							name="exemption-condition" value="exempt" />
-						<label class="usa-radio__label" for="check-exempt">None of the above</label>
-						<span class="usa-checkbox__label-description">The project may be considered exempted from
-							sharing and reuse as per the SHARE IT Act and M-16-21. </span></label>
+						<label class="usa-radio__label" for="check-exempt">None of the above
+							<span class="usa-checkbox__label-description">The project may be considered exempted from
+								sharing and reuse as per the SHARE IT Act and M-16-21. </span></label>
 					</div>
 				</fieldset>
-				<button type="button" id="start" onclick="determineExemptions(event)">Submit</button>
+
+				<button class="usa-button" type="button" id="start" onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
 			<div class="results-container">
-				<p class="exemption-result">Your project </p>
+				<div class="exemption-result"></div>
 			</div>
-			<button id="start" onclick="handleClick(event)">Try Again</button>
+			<button class="usa-button usa-button--unstyled" id="start" onclick="handleClick(event)">Try Again</button>
 		</div>
 	</div>
 
@@ -180,14 +163,15 @@ <h4 id="quiz-subheading">
 						<label class="usa-checkbox__label" for="share-it-act-check-none">None of the above </label>
 					</div>
 				</fieldset>
-				<button type="button" id="share-it-act" onclick="determineExemptions(event)">Submit</button>
+				<button class="usa-button" type="button" id="share-it-act"
+					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
 			<div class="results-container">
 				<p class="exemption-result">Your project </p>
 			</div>
-			<button id="share-it-act" onclick="handleClick(event)">Next</button>
+			<button class="usa-button" id="share-it-act" onclick="handleClick(event)">Next</button>
 		</div>
 	</div>
 
@@ -248,14 +232,15 @@ <h4 id="quiz-subheading">
 						<label class="usa-checkbox__label" for="m-16-21-check-none">None of the above </label>
 					</div>
 				</fieldset>
-				<button type="button" id="m-16-21" onclick="determineExemptions(event)">Submit</button>
+				<button class="usa-button" type="button" id="m-16-21"
+					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
 			<div class="results-container">
 				<p class="exemption-result">Your project </p>
 			</div>
-			<button id="m-16-21" onclick="handleClick(event)">Try Again</button>
+			<button class="usa-button" id="m-16-21" onclick="handleClick(event)">Try Again</button>
 		</div>
 	</div>
 
@@ -275,7 +260,7 @@ <h4 id="quiz-subheading">
 	<div id="form-subheader">
 		<div class="step-header">
 			<div class="step-number">3</div>
-			<h3>Complete the entire form to generate the code.json file</h3>
+			<h2>Complete the entire form to generate the code.json file</h2>
 		</div>
 	</div>
 	<br>

From 7491999bbc9eb690c737f5ac3d6eb447438469a1 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 11:49:41 -0700
Subject: [PATCH 02/12] Changed styling of part 2

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 js/generateFormComponents.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
index 18c70d6..73610af 100644
--- a/js/generateFormComponents.js
+++ b/js/generateFormComponents.js
@@ -256,7 +256,7 @@ function createFormHeading(title, description) {
 
 function createAutoGenerationBox() {
 	const container = document.getElementById("auto-generation-header")
-	container.innerHTML = `<div class="step-header"><div class="step-number">2</div><h3>Auto Generate Fields</h3></div> \n <h4> Please enter your repositories GitHub URL in order to automatically pre-fill some of the fields in this form! </h4> \n <h6> <i>This currently only works on <b>public</b> repositories</i> </h6>`
+	container.innerHTML = `<div class="step-header"><div class="step-number">2</div><h2>Auto Generate Fields</h2></div><h4 id="quiz-subheading"> Enter your repository's GitHub URL in order to automatically pre-fill some of the fields in this form </h4> \n <p> <i>This currently only works on <b>public</b> repositories</i> </p>`
 }
 
 // Iterates through each json field and creates component array for Form.io

From ce3f60e56e4ebff07d508ac897ddc2d7bd28c8ab Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 12:09:50 -0700
Subject: [PATCH 03/12] Changed styling for exemptions quiz

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 index.html                 | 18 ++++++++++--------
 js/exemptionQuizHandler.js | 10 +++++-----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 505b24e..e40da54 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,8 @@ <h4 id="quiz-subheading">
 					</div>
 				</fieldset>
 
-				<button class="usa-button" type="button" id="start" onclick="determineExemptions(event)">Submit</button>
+				<button class="usa-button margin-top-2" type="button" id="start"
+					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
@@ -94,7 +95,7 @@ <h4 id="quiz-subheading">
 		<div class="exemptions-header">
 			<div class="step-header">
 				<div class="step-number">1b</div>
-				<h3>Is my project exempted from the SHARE IT Act?</h3>
+				<h2>Is my project exempted from the SHARE IT Act?</h2>
 			</div>
 		</div>
 		<div id="exemptions-quiz-container" class="exemptions-quiz-container">
@@ -163,13 +164,13 @@ <h4 id="quiz-subheading">
 						<label class="usa-checkbox__label" for="share-it-act-check-none">None of the above </label>
 					</div>
 				</fieldset>
-				<button class="usa-button" type="button" id="share-it-act"
+				<button class="usa-button margin-top-2" type="button" id="share-it-act"
 					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
 			<div class="results-container">
-				<p class="exemption-result">Your project </p>
+				<div class="exemption-result"></div>
 			</div>
 			<button class="usa-button" id="share-it-act" onclick="handleClick(event)">Next</button>
 		</div>
@@ -179,7 +180,7 @@ <h4 id="quiz-subheading">
 		<div class="exemptions-header">
 			<div class="step-header">
 				<div class="step-number">1c</div>
-				<h3>Is my project exempted from M-16-21?</h3>
+				<h2>Is my project exempted from M-16-21?</h2>
 			</div>
 		</div>
 		<div class="exemptions-quiz-container">
@@ -232,15 +233,16 @@ <h4 id="quiz-subheading">
 						<label class="usa-checkbox__label" for="m-16-21-check-none">None of the above </label>
 					</div>
 				</fieldset>
-				<button class="usa-button" type="button" id="m-16-21"
+				<button class="usa-button margin-top-2" type="button" id="m-16-21"
 					onclick="determineExemptions(event)">Submit</button>
 			</div>
 		</div>
 		<div class="results" style="display: none;">
 			<div class="results-container">
-				<p class="exemption-result">Your project </p>
+				<div class="exemption-result"></div>
 			</div>
-			<button class="usa-button" id="m-16-21" onclick="handleClick(event)">Try Again</button>
+			<button class="usa-button usa-button--unstyled" id="m-16-21" onclick="handleClick(event)">Try
+				Again</button>
 		</div>
 	</div>
 
diff --git a/js/exemptionQuizHandler.js b/js/exemptionQuizHandler.js
index b425e6d..bbcb619 100644
--- a/js/exemptionQuizHandler.js
+++ b/js/exemptionQuizHandler.js
@@ -28,7 +28,7 @@ function determineResults(checkedValues, legislationName) {
     // Project is not exempt - simple quiz
     if (legislationName == "start") {
         if (checkedValues[0] !== "exempt") {
-            text = `<h4>Your project is qualified for sharing and reuse according to the SHARE IT Act and M-16-21.</h4>
+            text = `<h4 class="usa-heading margin-top-neg-05">Your project is qualified for sharing and reuse according to the SHARE IT Act and M-16-21.</h4>
                 <p>We've marked this in the form below for you as: <strong>${checkedValues[0]}</strong></p>`
         }
     }
@@ -37,12 +37,12 @@ function determineResults(checkedValues, legislationName) {
     else if ((checkedValues.length === 1 && checkedValues[0].includes("none")) || checkedValues.length === 0) {
 
         if (legislationName === "share-it-act") {
-            text = `<h4>Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
+            text = `<h4 class="usa-heading margin-top-neg-05">Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
                 <p>Please complete <strong>Part 1c</strong> to determine additional project exemptions.</p>`;
         }
         else {
-            text = `<h4>Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
-                <h5>If your project is NOT exempted from both M-16-21 AND the SHARE IT Act, please mark the following on the form: </h5>
+            text = `<h4 class="usa-heading margin-top-neg-05">Your project is: <div class="not-exempt"><strong>NOT EXEMPTED</strong></div></h4>
+                <p>If your project is NOT exempted from both M-16-21 AND the SHARE IT Act, please mark the following on the form: </p>
                 <p>If your repository is public, mark <code>usageType</code> as <strong>openSource</strong>.</p>
                 <p>If your repository is private, mark <code>usageType</code> as <strong>governmentWideReuse</strong>.</p>`;
         }
@@ -50,7 +50,7 @@ function determineResults(checkedValues, legislationName) {
     // Project is exempted
     else {
         const selections = checkedValues.join(", ");
-        text = `<h4>Your project is: <strong>EXEMPTED</strong></h4>
+        text = `<h4 class="usa-heading margin-top-neg-05">Your project is: <strong>EXEMPTED</strong></h4>
                 <p>We've marked this in the form below for you as: <strong>${selections}</strong></p>
                 <p>Be sure to include a 1–2 sentence justification in the <code>exemptionText</code> field to support the exemption determination.</p>`;
     }

From 36b84f21206dd21439e6716a6153c688c021b598 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 12:19:21 -0700
Subject: [PATCH 04/12] Changed styling for step 2 auto-generation

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 index.html                   | 16 ++++++++++++----
 js/generateFormComponents.js |  6 ------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index e40da54..d3e2ae5 100644
--- a/index.html
+++ b/index.html
@@ -251,11 +251,19 @@ <h4 id="quiz-subheading">
 	</div>
 
 	<div id="auto-generation">
-		<p id="auto-generation-header"></p>
+		<div class="auto-generation-header">
+			<div class="step-header">
+				<div class="step-number">2</div>
+				<h2>Auto Generate Fields</h2>
+			</div>
+			<h4 id="quiz-subheading"> Enter your repository's GitHub URL in order to automatically pre-fill some of the
+				fields in this form </h4>
+			<p><i>This currently only works on <b>public</b> repositories</i></p>
+		</div>
 		<form id="github-url-form">
-			<label for="repo-url">GitHub Repository URL</label><br>
-			<input type="text" id="repo-url" name="repo-url"><br>
-			<input type="submit" id="repo-url-button" value="Submit">
+			<label class="usa-label" for="repo-url">GitHub Repository URL</label>
+			<input class="usa-input" id="repo-url" name="repo-url" />
+			<button class="usa-button" type="submit" id="repo-url-button">Submit</button>
 		</form>
 	</div>
 
diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
index 73610af..45243a2 100644
--- a/js/generateFormComponents.js
+++ b/js/generateFormComponents.js
@@ -254,11 +254,6 @@ function createFormHeading(title, description) {
 	`;
 }
 
-function createAutoGenerationBox() {
-	const container = document.getElementById("auto-generation-header")
-	container.innerHTML = `<div class="step-header"><div class="step-number">2</div><h2>Auto Generate Fields</h2></div><h4 id="quiz-subheading"> Enter your repository's GitHub URL in order to automatically pre-fill some of the fields in this form </h4> \n <p> <i>This currently only works on <b>public</b> repositories</i> </p>`
-}
-
 // Iterates through each json field and creates component array for Form.io
 function createAllComponents(schema, prefix = "") {
 	let components = [];
@@ -305,7 +300,6 @@ async function createFormComponents() {
 	console.log("JSON Data:", jsonData);
 
 	createFormHeading(jsonData["title"], jsonData["description"]);
-	createAutoGenerationBox()
 
 	components = createAllComponents(jsonData);
 

From f0e6a47925a1ea73bb5790f0cf862684289df334 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 12:30:55 -0700
Subject: [PATCH 05/12] Change styling for notifications to using USWDS alerts

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 index.html               |  7 +++++--
 js/autoGenerateFields.js | 13 ++++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index d3e2ae5..116ddff 100644
--- a/index.html
+++ b/index.html
@@ -246,8 +246,11 @@ <h4 id="quiz-subheading">
 		</div>
 	</div>
 
-	<div id="notification" style="display: none;">
-		<p id="notification-message"></p>
+	<div class="usa-alert" id="notification" style="display:none;">
+		<div class="usa-alert__body">
+			<h4 class="usa-alert__heading"></h4>
+			<p class="usa-alert__text" id="notification-message"></p>
+		</div>
 	</div>
 
 	<div id="auto-generation">
diff --git a/js/autoGenerateFields.js b/js/autoGenerateFields.js
index 72a9bcc..66084a5 100644
--- a/js/autoGenerateFields.js
+++ b/js/autoGenerateFields.js
@@ -10,18 +10,17 @@ document.addEventListener("DOMContentLoaded", function () {
 const notificationSystem = {
     show: function (message, type = 'error') {
         const notification = document.getElementById('notification');
-        const messageElement = document.getElementById('notification-message');
+        const notificationHeading = document.querySelector('.usa-alert__heading')
+        const messageElement = document.querySelector('.usa-alert__text');
 
         messageElement.textContent = message;
 
         if (type === 'error') {
-            notification.style.backgroundColor = '#f8d7da';
-            notification.style.color = '#721c24';
-            notification.style.border = '1px solid #f5c6cb';
+            notification.classList.add("usa-alert--error");
+            notificationHeading.textContent = "Error";
         } else {
-            notification.style.backgroundColor = '#d4edda';
-            notification.style.color = '#155724';
-            notification.style.border = '1px solid #c3e6cb';
+            notification.classList.add("usa-alert--success");
+            notificationHeading.textContent = "Success";
         }
 
         notification.style.display = 'block';

From 7d20413b19f76a40870980946cd45f8a79ce217f Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 12:43:52 -0700
Subject: [PATCH 06/12] Changed styling

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 css/styles.css | 22 ++++++----------------
 index.html     |  2 +-
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index b4d2f04..9989e37 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,26 +1,21 @@
 body {
-    margin: 20px;
+    padding: 20px 40px;
 }
 
 textarea {
     margin-bottom: 10px;
 }
 
-#auto-generation,
+.auto-generation,
 .exemptions {
     border-radius: 15px;
-    padding: 20px;
+    padding: 10px 20px;
     padding-bottom: 25px;
-    margin-top: 20px;
     margin-bottom: 20px;
     background: #e6e6e6;
     width: 100%;
-    max-width: 800px;
-    box-sizing: border-box;
-}
-
-.exemptions {
     max-width: 1300px;
+    box-sizing: border-box;
 }
 
 #github-url-form,
@@ -63,7 +58,6 @@ textarea {
 }
 
 .step-number {
-    margin-top: 10px;
     background-color: #337AB7;
     color: white;
     font-weight: bold;
@@ -76,8 +70,8 @@ textarea {
     font-size: 20px;
 }
 
-.exemptions-quiz-container #quiz-subheading {
-    margin: 10px 0px 20px 0px;
+#quiz-subheading {
+    margin: 0px 0px 10px 0px;
 }
 
 .not-exempt {
@@ -85,10 +79,6 @@ textarea {
     display: inline-block;
 }
 
-/* .results-container p {
-    margin: 20px 0px;
-} */
-
 @keyframes slideDown {
     from {
         opacity: 0;
diff --git a/index.html b/index.html
index 116ddff..23aa770 100644
--- a/index.html
+++ b/index.html
@@ -253,7 +253,7 @@ <h4 class="usa-alert__heading"></h4>
 		</div>
 	</div>
 
-	<div id="auto-generation">
+	<div class="auto-generation">
 		<div class="auto-generation-header">
 			<div class="step-header">
 				<div class="step-number">2</div>

From bf074e145f4da9faafe6419cacb35019db7129d0 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 14:00:06 -0700
Subject: [PATCH 07/12] Remove styling and added comments

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 css/styles.css | 35 ++---------------------------------
 index.html     | 34 +++++++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 9989e37..4969e7c 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -18,39 +18,12 @@ textarea {
     box-sizing: border-box;
 }
 
-#github-url-form,
-#exemptions-checklist {
-    margin-top: 25px;
-    width: 100%;
-}
-
-#repo-url {
-    width: 100%;
-    max-width: 750px;
-    box-sizing: border-box;
-}
-
-#repo-url-button {
-    margin-top: 10px;
-    border-radius: 5px;
-}
-
-#notification {
-    padding: 10px;
+.usa-alert {
     margin-bottom: 15px;
-    border-radius: 5px;
-    position: relative;
-    width: 100%;
-    max-width: 800px;
-    box-sizing: border-box;
+    max-width: 1300px;
     animation: slideDown 0.3s ease;
 }
 
-#notification-message {
-    margin: 0;
-    padding-right: 20px;
-}
-
 .step-header {
     display: flex;
     align-items: center;
@@ -70,10 +43,6 @@ textarea {
     font-size: 20px;
 }
 
-#quiz-subheading {
-    margin: 0px 0px 10px 0px;
-}
-
 .not-exempt {
     color: green;
     display: inline-block;
diff --git a/index.html b/index.html
index 23aa770..2444309 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,10 @@
 </head>
 
 <body>
+
 	<div id="form-header"></div>
 
+	<!-- Exemptions Quiz: Simple Classification -->
 	<div class="exemptions" id="start">
 		<div class="exemptions-header">
 			<div class="step-header">
@@ -50,7 +52,7 @@ <h2>Identify your project's classification</h2>
 			</div>
 		</div>
 		<div id="exemptions-quiz-container" class="exemptions-quiz-container">
-			<h4 id="quiz-subheading">
+			<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading">
 				My project is considered:
 			</h4>
 			<div id="exemptions-quiz">
@@ -91,6 +93,7 @@ <h4 id="quiz-subheading">
 		</div>
 	</div>
 
+	<!-- Exemptions Quiz: SHARE IT Act -->
 	<div class="exemptions" id="share-it-act" style="display: none;">
 		<div class="exemptions-header">
 			<div class="step-header">
@@ -99,7 +102,7 @@ <h2>Is my project exempted from the SHARE IT Act?</h2>
 			</div>
 		</div>
 		<div id="exemptions-quiz-container" class="exemptions-quiz-container">
-			<h4 id="quiz-subheading">
+			<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading">
 				Answer the series of questions below to determine if your project falls under the exemption categories
 				according to the SHARE IT Act.
 			</h4>
@@ -176,6 +179,7 @@ <h4 id="quiz-subheading">
 		</div>
 	</div>
 
+	<!-- Exemptions Quiz: M-16-21 -->
 	<div class="exemptions" id="m-16-21" style="display: none;">
 		<div class="exemptions-header">
 			<div class="step-header">
@@ -184,7 +188,7 @@ <h2>Is my project exempted from M-16-21?</h2>
 			</div>
 		</div>
 		<div class="exemptions-quiz-container">
-			<h4 id="quiz-subheading">
+			<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading">
 				Answer the series of questions below to determine if your project falls under the exemption categories
 				according to M-16-21 Act.
 			</h4>
@@ -246,6 +250,7 @@ <h4 id="quiz-subheading">
 		</div>
 	</div>
 
+	<!-- Field Auto-Generation Notification -->
 	<div class="usa-alert" id="notification" style="display:none;">
 		<div class="usa-alert__body">
 			<h4 class="usa-alert__heading"></h4>
@@ -253,23 +258,26 @@ <h4 class="usa-alert__heading"></h4>
 		</div>
 	</div>
 
+	<!-- Field Auto-Generation -->
 	<div class="auto-generation">
 		<div class="auto-generation-header">
 			<div class="step-header">
 				<div class="step-number">2</div>
 				<h2>Auto Generate Fields</h2>
 			</div>
-			<h4 id="quiz-subheading"> Enter your repository's GitHub URL in order to automatically pre-fill some of the
+			<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading"> Enter your repository's
+				GitHub URL in order to automatically pre-fill some of the
 				fields in this form </h4>
 			<p><i>This currently only works on <b>public</b> repositories</i></p>
 		</div>
 		<form id="github-url-form">
 			<label class="usa-label" for="repo-url">GitHub Repository URL</label>
 			<input class="usa-input" id="repo-url" name="repo-url" />
-			<button class="usa-button" type="submit" id="repo-url-button">Submit</button>
+			<button class="usa-button margin-top-2" id="repo-url-button">Submit</button>
 		</form>
 	</div>
 
+	<!-- Form header -->
 	<div id="form-subheader">
 		<div class="step-header">
 			<div class="step-number">3</div>
@@ -280,14 +288,18 @@ <h2>Complete the entire form to generate the code.json file</h2>
 
 	<div id="formio"></div>
 
+	<!-- code.json Generated Output -->
 	<div id="output">
-		<label for="json-result">Your JSON Metadata </label>
-		<textarea class="form-control" rows="10" id="json-result" readonly></textarea>
-		<button type="button" class="btn btn-outline" href="#" onclick="copyToClipboard(event)">Copy</button>
-		<button type="button" class="btn btn-outline" href="#" onclick="downloadFile(event)">Download</button>
-		<button type="button" class="btn btn-outline" href="#" onclick="createProjectPR(event)">Create Pull
+		<label class="usa-label" for="json-result">Your code.json metadata</label>
+		<textarea class="usa-textarea" rows="30" id="json-result" name="json-result" readonly></textarea>
+		<button class="usa-button usa-button--outline" type="button" href="#"
+			onclick="copyToClipboard(event)">Copy</button>
+		<button class="usa-button usa-button--outline" type="button" href="#"
+			onclick="downloadFile(event)">Download</button>
+		<button class="usa-button usa-button--outline" type="button" href="#" onclick="createProjectPR(event)">Create
+			Pull
 			Request</button>
-		<button type="button" class="btn btn-outline" href="#" onclick="emailFile(event)">Email</button>
+		<button class="usa-button usa-button--outline" type="button" href="#" onclick="emailFile(event)">Email</button>
 	</div>
 
 </body>

From 4bbd626e21389b8823808b92be4bd13249a5f4f8 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Fri, 22 Aug 2025 14:10:18 -0700
Subject: [PATCH 08/12] Changed button action styling and spacing

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 css/styles.css |  8 ++++++++
 index.html     | 21 ++++++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 4969e7c..14a7ac5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -18,6 +18,10 @@ textarea {
     box-sizing: border-box;
 }
 
+#github-url-form {
+    margin-bottom: 0px;
+}
+
 .usa-alert {
     margin-bottom: 15px;
     max-width: 1300px;
@@ -48,6 +52,10 @@ textarea {
     display: inline-block;
 }
 
+.button-actions {
+    margin-top: 20px;
+}
+
 @keyframes slideDown {
     from {
         opacity: 0;
diff --git a/index.html b/index.html
index 2444309..63e03f6 100644
--- a/index.html
+++ b/index.html
@@ -284,7 +284,6 @@ <h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading">
 			<h2>Complete the entire form to generate the code.json file</h2>
 		</div>
 	</div>
-	<br>
 
 	<div id="formio"></div>
 
@@ -292,14 +291,18 @@ <h2>Complete the entire form to generate the code.json file</h2>
 	<div id="output">
 		<label class="usa-label" for="json-result">Your code.json metadata</label>
 		<textarea class="usa-textarea" rows="30" id="json-result" name="json-result" readonly></textarea>
-		<button class="usa-button usa-button--outline" type="button" href="#"
-			onclick="copyToClipboard(event)">Copy</button>
-		<button class="usa-button usa-button--outline" type="button" href="#"
-			onclick="downloadFile(event)">Download</button>
-		<button class="usa-button usa-button--outline" type="button" href="#" onclick="createProjectPR(event)">Create
-			Pull
-			Request</button>
-		<button class="usa-button usa-button--outline" type="button" href="#" onclick="emailFile(event)">Email</button>
+		<div class="button-actions">
+			<button class="usa-button usa-button--outline" type="button" href="#"
+				onclick="copyToClipboard(event)">Copy</button>
+			<button class="usa-button usa-button--outline" type="button" href="#"
+				onclick="downloadFile(event)">Download</button>
+			<button class="usa-button usa-button--outline" type="button" href="#"
+				onclick="createProjectPR(event)">Create
+				Pull
+				Request</button>
+			<button class="usa-button usa-button--outline" type="button" href="#"
+				onclick="emailFile(event)">Email</button>
+		</div>
 	</div>
 
 </body>

From 5eb1a50db11b856ff19382a30e8196582a99107e Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Mon, 25 Aug 2025 14:29:01 -0700
Subject: [PATCH 09/12] Add new content component to add description text below
 object fields

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 js/generateFormComponents.js | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
index 45243a2..a49b4f7 100644
--- a/js/generateFormComponents.js
+++ b/js/generateFormComponents.js
@@ -54,7 +54,10 @@ function determineType(field) {
 		return "integer";
 	} else if (field.type === "boolean") {
 		return "select-boolean";
-	} else if (field.type === "string" || field.type.includes("string")) {
+	} else if (field.type === "content") {
+		return "content";
+	}
+	else if (field.type === "string" || field.type.includes("string")) {
 		if (field.format == "date-time") {
 			return "datetime";
 		}
@@ -65,6 +68,7 @@ function determineType(field) {
 // Creates Form.io component based on json field type
 function createComponent(fieldName, fieldObject, requiredArray) {
 	const componentType = determineType(fieldObject);
+	console.log(componentType, "type determined");
 	const validate = determineValidation(fieldName, fieldObject, requiredArray);
 	switch (componentType) {
 		case "textfield":
@@ -239,6 +243,17 @@ function createComponent(fieldName, fieldObject, requiredArray) {
 				components: [],
 				validate
 			};
+		case "content":
+			return {
+				html: `<p class="margin-top-neg-3 margin-bottom-4 text-base-dark">${fieldObject["content"]}</p>`,
+				label: fieldName,
+				customClass: fieldObject["className"],
+				refreshOnChange: false,
+				key: fieldName,
+				type: "content",
+				input: false,
+				tableView: false
+			};
 		default:
 			break;
 	}
@@ -282,6 +297,18 @@ function createAllComponents(schema, prefix = "") {
 			}
 
 			components.push(fieldComponent);
+
+			// Add description below all object fields 
+			if (fieldComponent.type === "datagrid") {
+				const labelKey = `${key}-description`;
+				const label = {
+					type: "content",
+					content: value.description,
+					className: ".margin-bottom-neg-205"
+				}
+				const labelComponent = createComponent(labelKey, label, []);
+				components.push(labelComponent);
+			}
 		}
 	}
 

From 37a248d883ce0e1b670942cc47e7d24b357a26c2 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Mon, 25 Aug 2025 14:29:44 -0700
Subject: [PATCH 10/12] Add favicon

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.html b/index.html
index 63e03f6..90b3650 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,8 @@
 	<script src="https://cdn.form.io/js/formio.form.min.js"></script>
 	<script src="https://cdn.form.io/uswds/uswds.min.js"></script>
 
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
+
 	<!-- Render the form -->
 	<script src="js/generateFormComponents.js"></script>
 	<script src="js/formDataToJson.js"></script>

From 72d7a29d781375b487f34831c83a3bdd55109b25 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Mon, 25 Aug 2025 14:33:17 -0700
Subject: [PATCH 11/12] Change text weight for output label

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 90b3650..0d9e12d 100644
--- a/index.html
+++ b/index.html
@@ -291,7 +291,7 @@ <h2>Complete the entire form to generate the code.json file</h2>
 
 	<!-- code.json Generated Output -->
 	<div id="output">
-		<label class="usa-label" for="json-result">Your code.json metadata</label>
+		<label class="usa-label" for="json-result"><strong>Your code.json metadata</strong></label>
 		<textarea class="usa-textarea" rows="30" id="json-result" name="json-result" readonly></textarea>
 		<div class="button-actions">
 			<button class="usa-button usa-button--outline" type="button" href="#"

From da67933bcaca223d144234aac4a6a831cceaa723 Mon Sep 17 00:00:00 2001
From: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
Date: Tue, 26 Aug 2025 15:09:12 -0700
Subject: [PATCH 12/12] Resolved accessibility bugs

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
---
 index.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 0d9e12d..904576e 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,8 @@
-<html>
+<html lang="en-US">
 <meta charset="UTF-8">
 
 <head>
+	<title>code.json metadata</title>
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
 	<link rel="stylesheet" href="css/styles.css">
 
@@ -42,9 +43,7 @@
 </head>
 
 <body>
-
 	<div id="form-header"></div>
-
 	<!-- Exemptions Quiz: Simple Classification -->
 	<div class="exemptions" id="start">
 		<div class="exemptions-header">
