Skip to content

Commit ae86219

Browse files
natalialuzuriaganatalialuzuriaga
authored
Merge pull request #95 from DSACMS/DSACMS/nat/uswds-port
Implemented USWDS Styling
2 parents 781dfa6 + da67933 commit ae86219

File tree

5 files changed

+134
-133
lines changed

5 files changed

+134
-133
lines changed

‎css/styles.css‎

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,40 @@
11
body {
2-
margin: 20px;
2+
padding: 20px 40px;
33
}
44

55
textarea {
66
margin-bottom: 10px;
77
}
88

9-
#auto-generation,
9+
.auto-generation,
1010
.exemptions {
1111
border-radius: 15px;
12-
padding: 20px;
12+
padding: 10px 20px;
1313
padding-bottom: 25px;
14-
margin-top: 20px;
1514
margin-bottom: 20px;
1615
background: #e6e6e6;
1716
width: 100%;
18-
max-width: 800px;
19-
box-sizing: border-box;
20-
}
21-
22-
.exemptions {
2317
max-width: 1300px;
24-
}
25-
26-
#github-url-form,
27-
#exemptions-checklist {
28-
margin-top: 25px;
29-
width: 100%;
30-
}
31-
32-
#repo-url {
33-
width: 100%;
34-
max-width: 750px;
3518
box-sizing: border-box;
3619
}
3720

38-
#repo-url-button {
39-
margin-top: 10px;
40-
border-radius: 5px;
21+
#github-url-form {
22+
margin-bottom: 0px;
4123
}
4224

43-
#notification {
44-
padding: 10px;
25+
.usa-alert {
4526
margin-bottom: 15px;
46-
border-radius: 5px;
47-
position: relative;
48-
width: 100%;
49-
max-width: 800px;
50-
box-sizing: border-box;
27+
max-width: 1300px;
5128
animation: slideDown 0.3s ease;
5229
}
5330

54-
#notification-message {
55-
margin: 0;
56-
padding-right: 20px;
57-
}
58-
5931
.step-header {
6032
display: flex;
6133
align-items: center;
6234
gap: 0.5em;
6335
}
6436

6537
.step-number {
66-
margin-top: 10px;
6738
background-color: #337AB7;
6839
color: white;
6940
font-weight: bold;
@@ -76,18 +47,14 @@ textarea {
7647
font-size: 20px;
7748
}
7849

79-
.exemptions-quiz-container #quiz-subheading {
80-
margin: 10px 0px 20px 0px;
81-
}
82-
8350
.not-exempt {
8451
color: green;
8552
display: inline-block;
8653
}
8754

88-
/* .results-container p {
89-
margin: 20px 0px;
90-
} */
55+
.button-actions {
56+
margin-top: 20px;
57+
}
9158

9259
@keyframes slideDown {
9360
from {

‎index.html‎

Lines changed: 85 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
1-
<html>
1+
<html lang="en-US">
2+
<meta charset="UTF-8">
23

34
<head>
4-
<meta charset="utf-8">
5-
<!-- USWDS not working -->
6-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
7-
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
8-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css"> -->
9-
<!-- <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css"> -->
10-
<!-- <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css"> -->
11-
<!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/formio.full.min.css"> -->
12-
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script> -->
13-
<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script> -->
14-
<!-- <script src="https://cdn.form.io/uswds/uswds.min.js"></script> -->
15-
<!-- <script src="https://cdn.form.io/formiojs/formio.full.js"></script> -->
16-
<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
17-
5+
<title>code.json metadata</title>
186
<link rel="icon" type="image/x-icon" href="favicon.ico">
19-
20-
<!-- Uses bootstrap for now -->
21-
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
227
<link rel="stylesheet" href="css/styles.css">
238

24-
<!-- Working Form.io CDN -->
25-
<script src="https://unpkg.com/[email protected]/dist/formio.full.min.js"></script>
26-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css" rel="stylesheet">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
11+
<link rel="stylesheet" href="https://cdn.form.io/js/formio.form.min.css">
12+
<link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
14+
<script src="https://cdn.form.io/js/formio.form.min.js"></script>
15+
<script src="https://cdn.form.io/uswds/uswds.min.js"></script>
16+
17+
<link rel="icon" type="image/x-icon" href="favicon.ico">
2718

2819
<!-- Render the form -->
2920
<script src="js/generateFormComponents.js"></script>
@@ -33,20 +24,14 @@
3324
<script type="text/javascript">
3425
createFormComponents()
3526
.then((components) => {
27+
Formio.use(uswds);
3628
Formio.createForm(document.getElementById("formio"), {
3729
display: "form",
38-
theme: "primary",
39-
settings: {
40-
pdf: {
41-
id: "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
42-
src: "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
43-
},
44-
},
4530
components: components,
4631
}).then(function (form) {
4732
window.formIOInstance = form;
4833
form.on("submit", function (submission) {
49-
console.log("form submission here:", submission);
34+
console.log("Form Submission here:", submission);
5035
createCodeJson(submission.data);
5136
});
5237
});
@@ -59,63 +44,66 @@
5944

6045
<body>
6146
<div id="form-header"></div>
62-
47+
<!-- Exemptions Quiz: Simple Classification -->
6348
<div class="exemptions" id="start">
6449
<div class="exemptions-header">
6550
<div class="step-header">
6651
<div class="step-number">1</div>
67-
<h3>Identify your project's classification</h3>
52+
<h2>Identify your project's classification</h2>
6853
</div>
6954
</div>
7055
<div id="exemptions-quiz-container" class="exemptions-quiz-container">
71-
<h4 id="quiz-subheading">
56+
<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading">
7257
My project is considered:
7358
</h4>
7459
<div id="exemptions-quiz">
7560
<fieldset class="usa-fieldset">
7661
<div class="usa-radio">
7762
<input class="usa-radio__input usa-radio__input--tile" id="check-open-source" type="radio"
7863
name="exemption-condition" value="openSource" />
79-
<label class="usa-radio__label" for="check-open-source">Open Source</label>
80-
<span class="usa-checkbox__label-description">This project is publicly available
81-
and licensed under terms that allow others to use, modify, and distribute it (e.g.
82-
github.com)</span></label>
64+
<label class="usa-radio__label" for="check-open-source">Open Source
65+
<span class="usa-checkbox__label-description">This project is publicly available
66+
and licensed under terms that allow others to use, modify, and distribute it (e.g.
67+
github.com)</span></label>
8368
</div>
8469
<div class="usa-radio">
8570
<input class="usa-radio__input usa-radio__input--tile" id="check-govt-reuse" type="radio"
8671
name="exemption-condition" value="governmentWideReuse" />
87-
<label class="usa-radio__label" for="check-govt-reuse">Government Wide Reuse</label>
88-
<span class="usa-checkbox__label-description">The project is available internally for government
89-
wide use (e.g. github.cms.gov)</span></label>
72+
<label class="usa-radio__label" for="check-govt-reuse">Government Wide Reuse
73+
<span class="usa-checkbox__label-description">The project is available internally for
74+
government wide use (e.g. github.cms.gov)</span></label>
9075
</div>
9176
<div class="usa-radio">
9277
<input class="usa-radio__input usa-radio__input--tile" id="check-exempt" type="radio"
9378
name="exemption-condition" value="exempt" />
94-
<label class="usa-radio__label" for="check-exempt">None of the above</label>
95-
<span class="usa-checkbox__label-description">The project may be considered exempted from
96-
sharing and reuse as per the SHARE IT Act and M-16-21. </span></label>
79+
<label class="usa-radio__label" for="check-exempt">None of the above
80+
<span class="usa-checkbox__label-description">The project may be considered exempted from
81+
sharing and reuse as per the SHARE IT Act and M-16-21. </span></label>
9782
</div>
9883
</fieldset>
99-
<button type="button" id="start" onclick="determineExemptions(event)">Submit</button>
84+
85+
<button class="usa-button margin-top-2" type="button" id="start"
86+
onclick="determineExemptions(event)">Submit</button>
10087
</div>
10188
</div>
10289
<div class="results" style="display: none;">
10390
<div class="results-container">
104-
<p class="exemption-result">Your project </p>
91+
<div class="exemption-result"></div>
10592
</div>
106-
<button id="start" onclick="handleClick(event)">Try Again</button>
93+
<button class="usa-button usa-button--unstyled" id="start" onclick="handleClick(event)">Try Again</button>
10794
</div>
10895
</div>
10996

97+
<!-- Exemptions Quiz: SHARE IT Act -->
11098
<div class="exemptions" id="share-it-act" style="display: none;">
11199
<div class="exemptions-header">
112100
<div class="step-header">
113101
<div class="step-number">1b</div>
114-
<h3>Is my project exempted from the SHARE IT Act?</h3>
102+
<h2>Is my project exempted from the SHARE IT Act?</h2>
115103
</div>
116104
</div>
117105
<div id="exemptions-quiz-container" class="exemptions-quiz-container">
118-
<h4 id="quiz-subheading">
106+
<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading">
119107
Answer the series of questions below to determine if your project falls under the exemption categories
120108
according to the SHARE IT Act.
121109
</h4>
@@ -180,26 +168,28 @@ <h4 id="quiz-subheading">
180168
<label class="usa-checkbox__label" for="share-it-act-check-none">None of the above </label>
181169
</div>
182170
</fieldset>
183-
<button type="button" id="share-it-act" onclick="determineExemptions(event)">Submit</button>
171+
<button class="usa-button margin-top-2" type="button" id="share-it-act"
172+
onclick="determineExemptions(event)">Submit</button>
184173
</div>
185174
</div>
186175
<div class="results" style="display: none;">
187176
<div class="results-container">
188-
<p class="exemption-result">Your project </p>
177+
<div class="exemption-result"></div>
189178
</div>
190-
<button id="share-it-act" onclick="handleClick(event)">Next</button>
179+
<button class="usa-button" id="share-it-act" onclick="handleClick(event)">Next</button>
191180
</div>
192181
</div>
193182

183+
<!-- Exemptions Quiz: M-16-21 -->
194184
<div class="exemptions" id="m-16-21" style="display: none;">
195185
<div class="exemptions-header">
196186
<div class="step-header">
197187
<div class="step-number">1c</div>
198-
<h3>Is my project exempted from M-16-21?</h3>
188+
<h2>Is my project exempted from M-16-21?</h2>
199189
</div>
200190
</div>
201191
<div class="exemptions-quiz-container">
202-
<h4 id="quiz-subheading">
192+
<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading">
203193
Answer the series of questions below to determine if your project falls under the exemption categories
204194
according to M-16-21 Act.
205195
</h4>
@@ -248,48 +238,72 @@ <h4 id="quiz-subheading">
248238
<label class="usa-checkbox__label" for="m-16-21-check-none">None of the above </label>
249239
</div>
250240
</fieldset>
251-
<button type="button" id="m-16-21" onclick="determineExemptions(event)">Submit</button>
241+
<button class="usa-button margin-top-2" type="button" id="m-16-21"
242+
onclick="determineExemptions(event)">Submit</button>
252243
</div>
253244
</div>
254245
<div class="results" style="display: none;">
255246
<div class="results-container">
256-
<p class="exemption-result">Your project </p>
247+
<div class="exemption-result"></div>
257248
</div>
258-
<button id="m-16-21" onclick="handleClick(event)">Try Again</button>
249+
<button class="usa-button usa-button--unstyled" id="m-16-21" onclick="handleClick(event)">Try
250+
Again</button>
259251
</div>
260252
</div>
261253

262-
<div id="notification" style="display: none;">
263-
<p id="notification-message"></p>
254+
<!-- Field Auto-Generation Notification -->
255+
<div class="usa-alert" id="notification" style="display:none;">
256+
<div class="usa-alert__body">
257+
<h4 class="usa-alert__heading"></h4>
258+
<p class="usa-alert__text" id="notification-message"></p>
259+
</div>
264260
</div>
265261

266-
<div id="auto-generation">
267-
<p id="auto-generation-header"></p>
262+
<!-- Field Auto-Generation -->
263+
<div class="auto-generation">
264+
<div class="auto-generation-header">
265+
<div class="step-header">
266+
<div class="step-number">2</div>
267+
<h2>Auto Generate Fields</h2>
268+
</div>
269+
<h4 class="usa-heading margin-top-neg-05 margin-bottom-1" id="quiz-subheading"> Enter your repository's
270+
GitHub URL in order to automatically pre-fill some of the
271+
fields in this form </h4>
272+
<p><i>This currently only works on <b>public</b> repositories</i></p>
273+
</div>
268274
<form id="github-url-form">
269-
<label for="repo-url">GitHub Repository URL</label><br>
270-
<input type="text" id="repo-url" name="repo-url"><br>
271-
<input type="submit" id="repo-url-button" value="Submit">
275+
<label class="usa-label" for="repo-url">GitHub Repository URL</label>
276+
<input class="usa-input" id="repo-url" name="repo-url" />
277+
<button class="usa-button margin-top-2" id="repo-url-button">Submit</button>
272278
</form>
273279
</div>
274280

281+
<!-- Form header -->
275282
<div id="form-subheader">
276283
<div class="step-header">
277284
<div class="step-number">3</div>
278-
<h3>Complete the entire form to generate the code.json file</h3>
285+
<h2>Complete the entire form to generate the code.json file</h2>
279286
</div>
280287
</div>
281-
<br>
282288

283289
<div id="formio"></div>
284290

291+
<!-- code.json Generated Output -->
285292
<div id="output">
286-
<label for="json-result">Your JSON Metadata </label>
287-
<textarea class="form-control" rows="10" id="json-result" readonly></textarea>
288-
<button type="button" class="btn btn-outline" href="#" onclick="copyToClipboard(event)">Copy</button>
289-
<button type="button" class="btn btn-outline" href="#" onclick="downloadFile(event)">Download</button>
290-
<button type="button" class="btn btn-outline" href="#" onclick="createProjectPR(event)">Create Pull
291-
Request</button>
292-
<button type="button" class="btn btn-outline" href="#" onclick="emailFile(event)">Email</button>
293+
<label class="usa-label" for="json-result"><strong>Your code.json metadata</strong></label>
294+
<textarea class="usa-textarea" rows="30" id="json-result" name="json-result" readonly></textarea>
295+
<div class="button-actions">
296+
<button class="usa-button usa-button--outline" type="button" href="#"
297+
onclick="copyToClipboard(event)">Copy</button>
298+
<button class="usa-button usa-button--outline" type="button" href="#"
299+
onclick="downloadFile(event)">Download</button>
300+
<button class="usa-button usa-button--outline" type="button" href="#"
301+
onclick="createProjectPR(event)">Create
302+
Pull
303+
Request</button>
304+
<button class="usa-button usa-button--outline" type="button" href="#"
305+
onclick="emailFile(event)">Email</button>
306+
</div>
293307
</div>
294308

295309
</body>

‎js/autoGenerateFields.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,17 @@ document.addEventListener("DOMContentLoaded", function () {
1010
const notificationSystem = {
1111
show: function (message, type = 'error') {
1212
const notification = document.getElementById('notification');
13-
const messageElement = document.getElementById('notification-message');
13+
const notificationHeading = document.querySelector('.usa-alert__heading')
14+
const messageElement = document.querySelector('.usa-alert__text');
1415

1516
messageElement.textContent = message;
1617

1718
if (type === 'error') {
18-
notification.style.backgroundColor = '#f8d7da';
19-
notification.style.color = '#721c24';
20-
notification.style.border = '1px solid #f5c6cb';
19+
notification.classList.add("usa-alert--error");
20+
notificationHeading.textContent = "Error";
2121
} else {
22-
notification.style.backgroundColor = '#d4edda';
23-
notification.style.color = '#155724';
24-
notification.style.border = '1px solid #c3e6cb';
22+
notification.classList.add("usa-alert--success");
23+
notificationHeading.textContent = "Success";
2524
}
2625

2726
notification.style.display = 'block';

0 commit comments

Comments
 (0)