Skip to content

Commit

Permalink
Updates to form styling for demo (#54)
Browse files Browse the repository at this point in the history 
* Initial updates to preview form styling.

* Demo tweaks

---------

Co-authored-by: Jason Nakai <[email protected]>
Co-authored-by: Daniel Naab <[email protected]>
  • Loading branch information
@jimmoffet @jasnakai @danielnaab
3 people authored Feb 29, 2024
1 parent 96d315d commit beb835c
Show file tree
Hide file tree
Showing 8 changed files with 260 additions and 46 deletions.
51 changes: 50 additions & 1 deletion packages/design/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@ a,
main {
flex: 1;
width: 100%;
/*
>section {
&.grid-container {
margin: 0;
padding: 0;
}
}
*/
}

.usa-banner__inner,
Expand Down Expand Up @@ -125,9 +133,50 @@ main {

.usa-legend {
max-width: 100%;
font-weight: 600;
width: -webkit-fill-available;
}

nav {
background: #F7F9FD;
padding: 0 1.5rem;

>ul {
padding-top: 2.6rem;
}
}
.previewForm {
padding-left: 1rem;

>fieldset {
margin-bottom: 10em;

>legend {
border-bottom: 1px #DCDEE0 solid;
font-size: 2rem;
}

>.usa-form-group {
margin-left: 3rem;
}

.usa-form-group {
>fieldset {
border-bottom: 1px #DCDEE0 solid;
padding-bottom: 2rem;

legend {
font-size: 1.5rem;
border-bottom: none;
}

p {
font-weight: bold;
}
}
}
}

.previewForm {
.usa-button {
margin: 1rem 0 0 1rem;
}
Expand Down
179 changes: 153 additions & 26 deletions packages/design/src/Form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,34 +89,161 @@ export default function Form({
updatePrompt(allFormData);
}, [allFormData]);
*/
console.log(JSON.stringify(prompt));
return (
<FormProvider {...formMethods}>
<form
className="previewForm"
onSubmit={formMethods.handleSubmit(async data => {
updatePrompt(data);
if (onSubmit) {
console.log('Submitting form...');
onSubmit(data);
} else {
console.warn('Skipping form submission...');
}
})}
>
<fieldset className="usa-fieldset">
{prompt.parts.map((part, index) => {
return (
<PromptComponent
key={index}
context={context}
promptPart={part}
/>
);
})}
{/* Add submit button or other controls as needed */}
</fieldset>
<ActionBar actions={prompt.actions} />
</form>
<div className="preview">
<div className="grid-row">
<nav className="sideNav tablet:grid-col-3 margin-bottom-4 tablet:margin-bottom-0">
<ul className="usa-sidenav">
<li className="usa-sidenav__item">
<a href="">County</a>
</li>
<li className="usa-sidenav__item">
<a className="usa-current" href="">
Current name
</a>
</li>
<ul className="usa-sidenav__sublist">
<li className="usa-sidenav__item">
<a className="usa-current" href="">
First name
</a>
</li>
<li className="usa-sidenav__item">
<a href="">Middle name</a>
</li>
<li className="usa-sidenav__item">
<a href="">Last name</a>
</li>
</ul>
<li className="usa-sidenav__item">
<a href="">Declarations</a>
</li>
<li className="usa-sidenav__item">
<a href="">Address</a>
</li>
<li className="usa-sidenav__item">
<a href="">Telephone</a>
</li>
<li className="usa-sidenav__item">
<a href="">Date of Birth</a>
</li>
<li className="usa-sidenav__item">
<a href="">Name at Birth</a>
</li>
</ul>
</nav>
<div className="grid-col-9 usa-prose">
<form
className="previewForm usa-form usa-form--large margin-bottom-3"
onSubmit={formMethods.handleSubmit(async data => {
updatePrompt(data);
if (onSubmit) {
console.log('Submitting form...');
onSubmit(data);
} else {
console.warn('Skipping form submission...');
}
})}
>
{false && (
<fieldset className="usa-fieldset">
<legend className="usa-legend usa-legend--large">
Request to Change Name
</legend>
<div className="usa-form-group">
<div className="usa-form-group">
<fieldset className="usa-fieldset">
<legend className="usa-legend usa-legend--large">
County where you live
</legend>
<label className="usa-label">
Name of your county *
</label>
<input
className="usa-input"
id="input-users1_address_line_one"
name="users1_address_line_one"
type="text"
aria-describedby="input-message-users1_address_line_one"
value=""
/>
</fieldset>
</div>
</div>

<div className="usa-form-group">
<div className="usa-form-group">
<fieldset className="usa-fieldset">
<legend className="usa-legend usa-legend--large">
Your current name
</legend>
<label className="usa-label">First name *</label>
<input
className="usa-input"
id="input-users1_first_name"
name="users1_first_name"
type="text"
aria-describedby="input-message-users1_first_name"
value=""
/>
<label className="usa-label">Middle name *</label>
<input
className="usa-input"
id="input-users1_middle_name"
name="users1_middle_name"
type="text"
aria-describedby="input-message-users1_middle_name"
value=""
/>
<label className="usa-label">Last name *</label>
<input
className="usa-input"
id="input-users1_last_name"
name="users1_last_name"
type="text"
aria-describedby="input-message-users1_last_name"
value=""
/>
</fieldset>
<fieldset className="usa-fieldset">
<p>
To ask the court to change your name, you must fill
out this form, and:
</p>
<ul>
<li>
Attach a certified copy of your birth certificate
and a copy of your photo ID, and
</li>
<li>
File your form and attachements in the same county
where you live.
</li>
</ul>
</fieldset>
</div>
</div>
</fieldset>
)}

<fieldset className="usa-fieldset">
{prompt.parts.map((part, index) => {
return (
<PromptComponent
key={index}
context={context}
promptPart={part}
/>
);
})}
</fieldset>
<ActionBar actions={prompt.actions} />
</form>
</div>
</div>
</div>
</FormProvider>
);
}
Expand Down
13 changes: 7 additions & 6 deletions packages/documents/src/document.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
addFormOutput,
addFormElements,
addFormElementMap,
updateFormSummary,
} from '@atj/forms';
import { PDFDocument, getDocumentFieldData } from './pdf';
import { getSuggestedFormElementsFromCache } from './suggestions';
Expand All @@ -23,12 +24,12 @@ export const addDocument = async (
const cachedPdf = await getSuggestedFormElementsFromCache(fileDetails.data);

if (cachedPdf) {
const withElements = addFormElementMap(
form,
cachedPdf.elements,
cachedPdf.root
);
const updatedForm = addFormOutput(withElements, {
form = updateFormSummary(form, {
title: cachedPdf.title,
description: '',
});
form = addFormElementMap(form, cachedPdf.elements, cachedPdf.root);
const updatedForm = addFormOutput(form, {
data: fileDetails.data,
path: fileDetails.name,
fields: cachedPdf.outputs,
Expand Down
14 changes: 7 additions & 7 deletions packages/documents/src/pdf/al_name_change.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"raw_text": "Request to Change Name Case Number: (the clerk fills this in) \n8/08 (For An Adult) \n<question>In the Probate Court of (county): County, Alabama <input label=County_Name1 instructions={field_dict['field_instructions']}></question>\n<question>Your current name: <input label=Current_First_Name1 instructions={field_dict['field_instructions']}><input label=Current_Middle_Name1 instructions={field_dict['field_instructions']}><input label=Current_Last_Name1 instructions={field_dict['field_instructions']}></question>\nfirst middle last \nTo ask the court to change your name, you must fill out this form, and: \n\u2022 Attach a certified copy of your birth certificate and a copy of your photo ID, and \n\u2022 File your form and attachments in the same county where you live. \nI declare that the following information is true: \n<question>My current name is: <input label=Current_First_Name2 instructions={field_dict['field_instructions']}><input label=Current_Middle_Name2 instructions={field_dict['field_instructions']}><input label=Current_Last_Name2 instructions={field_dict['field_instructions']}></question>\nfirst middle last \n<question>My address is: <input label=Street_Address instructions={field_dict['field_instructions']}><input label=City instructions={field_dict['field_instructions']}><input label=State instructions={field_dict['field_instructions']}><input label=Zip instructions={field_dict['field_instructions']}></question>\nstreet city state zip \n<question>My phone numbers are (home): (work): <input label=Home_Phone instructions={field_dict['field_instructions']}><input label=Work_Phone instructions={field_dict['field_instructions']}></question>\n<question>My date of birth is (mm/dd/yyyy): <input label=DOB instructions={field_dict['field_instructions']}></question>\n<question>My name at birth was: <input label=Birth_First_Name instructions={field_dict['field_instructions']}><input label=Birth_Middle_Name instructions={field_dict['field_instructions']}><input label=Birth_Last_Name instructions={field_dict['field_instructions']}></question>\nfirst middle last \n<question>I am an adult (19 or older), of sound mind, and live in (name of Alabama county): <input label=County_Name2 instructions={field_dict['field_instructions']}></question>\n<question>The attached copy of my photo ID is my (check one): <button type=radio> Driver\u2019s license, # <input label=PhotoID instructions=NA><input label=DL# instructions={field_dict['field_instructions']}></question>\n<question><input label=PhotoID instructions=NA><button type=radio> Non-driver\u2019s photo, ID #: <input label=ID# instructions={field_dict['field_instructions']}></question>\n<question>I ask the court to change my name because (explain why you want to change your name): <input label=Why_change_name1 instructions={field_dict['field_instructions']}></question>\n<question><input label=Why_change_name2 instructions={field_dict['field_instructions']}></question>\n<question><input label=Why_change_name3 instructions={field_dict['field_instructions']}></question>\n<question>I want my new name to be: <input label=New_First_Name instructions={field_dict['field_instructions']}><input label=New_Middle_Name instructions={field_dict['field_instructions']}><input label=New_Last_Name instructions={field_dict['field_instructions']}></question>\nfirst middle last \nI also declare: \n\u2022 I am not now facing criminal charges, nor am I involved in any other court case. \n\u2022 I have never been convicted of a criminal sex offense (as defined in Alabama Code \u00a7 15-20-21), \na crime of moral turpitude, or a felony. \n\u2022 I am not asking to change my name to avoid paying my debts or to commit fraud. \n\u2022 I swear that all of the information I have provided above is complete and accurate. \nI ask the court to grant this request and to issue an order changing my name. \nSign below in front of a notary: \n Date: \nNotary fills out below\u2014 \nSworn to and subscribed before me, the undersigned authority, \nBy (Print name of notary): \nOn this date: (Notary\u2019s seal here) \n / / \n Notary signs here Date notary\u2019s commission expires \nRev. 8/08 \uf8e9 2008 Alabama State Bar ",
"title": "",
"title": "PS-12 - Request to Change Name (For An Adult)",
"description": "",
"elements": [
{
Expand Down Expand Up @@ -45,7 +45,7 @@
"group_id": 3,
"element_type": "text",
"element_params": {
"text": "Your current name: ",
"text": "Your current name",
"text_style": "JTUTCJ+ArialMT 9.840000000000032",
"options": null
},
Expand Down Expand Up @@ -154,7 +154,7 @@
"group_id": 9,
"element_type": "text",
"element_params": {
"text": "My current name is: ",
"text": "My current name",
"text_style": "JTUTCJ+ArialMT 8.879999999999995",
"options": null
},
Expand Down Expand Up @@ -215,7 +215,7 @@
"group_id": 11,
"element_type": "text",
"element_params": {
"text": "My address is: ",
"text": "My address",
"text_style": "JTUTCJ+ArialMT 8.879999999999995",
"options": null
},
Expand Down Expand Up @@ -288,7 +288,7 @@
"group_id": 13,
"element_type": "text",
"element_params": {
"text": "My phone numbers are (home): (work): ",
"text": "My phone numbers",
"text_style": "DURMBL+Arial-BoldMT 8.879999999999995",
"options": null
},
Expand Down Expand Up @@ -350,7 +350,7 @@
"group_id": 15,
"element_type": "text",
"element_params": {
"text": "My name at birth was: ",
"text": "My name at birth",
"text_style": "JTUTCJ+ArialMT 8.879999999999995",
"options": null
},
Expand Down Expand Up @@ -598,7 +598,7 @@
"group_id": 22,
"element_type": "text",
"element_params": {
"text": "I want my new name to be: ",
"text": "My new name",
"text_style": "JTUTCJ+ArialMT 8.879999999999995",
"options": null
},
Expand Down
6 changes: 5 additions & 1 deletion packages/documents/src/pdf/extract.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import * as pdfLib from 'pdf-lib';

import type { DocumentFieldMap, DocumentFieldValue } from '@atj/forms';
import {
createForm,
type DocumentFieldMap,
type DocumentFieldValue,
} from '@atj/forms';

export const getDocumentFieldData = async (
pdfBytes: Uint8Array
Expand Down
Loading

0 comments on commit beb835c

Please sign in to comment.