From 3671fc23eff8a1e80ddd205dc9605058e6988c3d Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Wed, 14 Feb 2024 10:31:07 -0700 Subject: [PATCH 1/7] Phase 1 of styling for the Form Builder Tool --- README.md | 7 +- apps/spotlight/src/components/Header.astro | 31 +- .../spotlight/src/layouts/ContentLayout.astro | 20 +- apps/spotlight/src/layouts/Layout.astro | 11 +- apps/spotlight/src/pages/index.astro | 2 +- apps/spotlight/src/styles.css | 7 +- package.json | 4 +- packages/design/images/logo.svg | 5 + packages/design/sass/styles.scss | 261 ++++++ .../design/src/AvailableFormList/index.tsx | 20 +- packages/design/src/Form/index.tsx | 2 +- .../FormManager/DocumentImporter/index.tsx | 7 +- .../src/FormManager/FormDelete/index.tsx | 10 +- .../FormEdit/FormElementEdit/RenderField.tsx | 26 +- .../FormElementEdit/SequenceElementEdit.tsx | 13 +- .../design/src/FormManager/FormEdit/index.tsx | 35 +- .../FormList/PDFFileSelect/index.tsx | 9 +- .../design/src/FormManager/FormList/index.tsx | 23 +- .../src/FormManager/FormPreview/index.tsx | 5 + .../src/FormManager/import-document.tsx | 17 +- .../src/FormManager/internalPageTopNav.tsx | 51 ++ pnpm-lock.yaml | 773 +++++++++++++++--- 22 files changed, 1115 insertions(+), 224 deletions(-) create mode 100644 packages/design/images/logo.svg create mode 100644 packages/design/src/FormManager/internalPageTopNav.tsx diff --git a/README.md b/README.md index 3c39b04c..da1ef07d 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,12 @@ pnpm vitest To start developing with hot reloading, use: ```bash -pnpm dev --concurrency 12 +pnpm build +``` +then run: + +```bash +pnpm dev ``` These local servers will be started: diff --git a/apps/spotlight/src/components/Header.astro b/apps/spotlight/src/components/Header.astro index 1ca3e3e3..d4c982b8 100644 --- a/apps/spotlight/src/components/Header.astro +++ b/apps/spotlight/src/components/Header.astro @@ -1,5 +1,6 @@ --- import closeSvg from '@atj/design/static/uswds/img/usa-icons/close.svg'; +import logoSvg from '@atj/design/images/logo.svg'; import * as routes from '../routes'; @@ -12,21 +13,21 @@ const getNavLinkClasses = (url: string) => { }; --- -
-
-
-
- - +
+
+ -
+ -
+
+
diff --git a/apps/spotlight/src/layouts/ContentLayout.astro b/apps/spotlight/src/layouts/ContentLayout.astro index 864f58d2..bc9a3134 100644 --- a/apps/spotlight/src/layouts/ContentLayout.astro +++ b/apps/spotlight/src/layouts/ContentLayout.astro @@ -8,19 +8,15 @@ const { title } = Astro.props; --- -
-
-
-
-
-
- -
+
+
+
+
+
+
-
-
+
+
diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro index 9b9dc8b9..bf87c867 100644 --- a/apps/spotlight/src/layouts/Layout.astro +++ b/apps/spotlight/src/layouts/Layout.astro @@ -45,13 +45,16 @@ const context = getAppContext(); /> + {title} - -
- -
+
+ +
+ +
+
diff --git a/apps/spotlight/src/pages/index.astro b/apps/spotlight/src/pages/index.astro index cbc692da..7fd4b8db 100644 --- a/apps/spotlight/src/pages/index.astro +++ b/apps/spotlight/src/pages/index.astro @@ -5,7 +5,7 @@ import DebugTools from '../components/DebugTools'; --- -

10x Access to Justice Spotlight

+

Create an interview from a PDF Form

 diff --git a/apps/spotlight/src/styles.css b/apps/spotlight/src/styles.css index a4fd3f1a..1c378f58 100644 --- a/apps/spotlight/src/styles.css +++ b/apps/spotlight/src/styles.css @@ -1,9 +1,4 @@ @import '@atj/design/static/uswds/styles/styles.css'; -.usa-form--large { - max-width: 32rem; -} -.usa-legend { - max-width: 100%; -} + diff --git a/package.json b/package.json index aa2f1d94..b6fbd683 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "prettier": "^3.2.5", "ts-node": "^10.9.2", "tsup": "^8.0.1", - "turbo": "^1.12.2", + "turbo": "^1.12.3", "type-fest": "^4.10.2", "typescript": "^5.3.3", "vitest": "^0.34.6", @@ -36,6 +36,6 @@ "vitest-mock-extended": "^1.3.1" }, "dependencies": { - "astro": "^4.3.3" + "astro": "^4.3.5" } } diff --git a/packages/design/images/logo.svg b/packages/design/images/logo.svg new file mode 100644 index 00000000..53c1da95 --- /dev/null +++ b/packages/design/images/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss index 7cef8a06..65be3ea7 100644 --- a/packages/design/sass/styles.scss +++ b/packages/design/sass/styles.scss @@ -1,2 +1,263 @@ @forward "uswds-theme"; @forward "uswds"; + +.usa-app { + display: flex; + min-height: 100vh; + flex-direction: column; +} + +main { + flex: 1; + width: 100%; +} + +.usa-banner__inner, +.usa-header--extended .usa-navbar, +.usa-header--extended .usa-nav__inner, +.grid-container, +.usa-footer>.grid-container, +.usa-footer__primary-container, +.usa-footer__primary-section>.grid-container { + max-width: 75rem; +} + +.usa-header { + background: #18161d; +} + +.usa-nav { + background: white; +} + +a, +.usa-link, +.usa-button--unstyled { + color: #54278f; +} + +h1 { + span { + display: inline-block; + vertical-align: top; + margin-right: 20px; + } +} +.usa-button, +.usa-menu-btn { + background-color: #54278f; +} + +.usa-header, +.usa-header a { + color: white; +} + +.usa-table { + width: 100%; + + .column1 { + width: 50%; + } + + .column2 { + width: 30%; + } + + .column3 { + width: 20%; + } + + .actionColumn { + span { + margin: 0 30px 0 0; + + &:last-child { + margin: 0; + } + } + } +} + +.usa-form--large { + max-width: 32rem; +} + +.usa-legend { + max-width: 100%; +} + +.previewForm { + .usa-button { + margin-top: 20px; + } +} + +.innerPageTopNavWrapper { + margin-bottom: 50px; + + .innerPageTopNav { + ul { + list-style: none; + padding: 0; + margin: 0 auto; + + li { + margin: 0 1px; + + &.currentPage { + a, + a:hover { + background: #454540; + color: white; + } + } + + a { + display: block; + background: #ede3ff; + color: #39215e; + border: 1px solid #ede3ff; + } + + a, + .usa-button { + text-decoration: none; + padding: 15px; + font-size: 20px; + text-align: center; + + &:hover { + background: #f5f2ff; + border: 1px solid #e4deff; + } + } + + .usa-button { + margin-top: 0; + } + } + } + + .usa-button { + margin: 0; + height: 100%; + width: 100%; + } + } +} + +[contentEditable=true]:focus, +[href]:focus, +[tabindex]:focus, +iframe:focus { + outline: 0.25rem solid #783cb9; +} + +.editFormPage { + fieldset { + border: none; + padding: 0; + } +} + +.editFormWrapper { + list-style: none; + padding: 0; + border-top: 1px solid #c9c9c9; + + li { + padding: 15px 0 20px; + border-bottom: 1px solid #c9c9c9; + } + + .usa-label { + margin-top: 0; + } +} + +.editPageGrabButtonWrapper { + font-size: 20px; + text-align: center; + width: 45px; + + span { + display: inline-block; + vertical-align: top; + } + + .grabber2 { + margin-top: -6px; + } +} + +.usa-step-indicator__segment { + max-width: 22rem; + + &--current { + + .usa-step-indicator__segment-label { + color: #783cb9; + } + + &::after { + background: #783cb9; + } + } +} + +@media (min-width: 64em) { + .usa-header--extended { + .usa-nav__primary-item { + + &>.usa-current::after, + &>.usa-nav__link:hover::after { + background-color: #783cb9; + } + } + + .usa-logo { + max-width: 100%; + } + } + + .usa-link:active, + .usa-link:visited, + .usa-file-input__choose, + .usa-nav__primary>.usa-nav__primary-item>a:hover { + color: #39215e; + } +} + +@media screen and (max-width: 480px) { + .usa-legend, + .usa-label { + word-break: break-all; + } + + .innerPageTopNavWrapper { + .innerPageTopNav { + ul { + li { + flex: 0 1 auto; + width: 100%; + margin: 0 0 4px; + } + } + } + } + + .editFieldsWrapper { + width: 85%; + + .grid-col { + width: 100%; + flex: 0 1 auto; + } + + .usa-label { + margin-bottom: 16px; + } + } + +} diff --git a/packages/design/src/AvailableFormList/index.tsx b/packages/design/src/AvailableFormList/index.tsx index ee4eb65e..7030fa82 100644 --- a/packages/design/src/AvailableFormList/index.tsx +++ b/packages/design/src/AvailableFormList/index.tsx @@ -34,28 +34,30 @@ const FormList = ({ urlForForm: UrlForForm; }) => { return ( - + +
- - - + + + {forms.map((form, index) => ( - - - + + ))}
Available forms
Form titleDescriptionForm titleDescriptionActions
{form.title}{form.description} - - Go to form + {form.title}{form.description} + + Preview form
+ ); }; diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx index 33c40f5a..1c335ac0 100644 --- a/packages/design/src/Form/index.tsx +++ b/packages/design/src/Form/index.tsx @@ -23,7 +23,7 @@ export default function Form({ const formMethods = useForm>({}); return ( -
{ if (onSubmit) { console.log('Submitting form...'); diff --git a/packages/design/src/FormManager/DocumentImporter/index.tsx b/packages/design/src/FormManager/DocumentImporter/index.tsx index c06c1536..608e8166 100644 --- a/packages/design/src/FormManager/DocumentImporter/index.tsx +++ b/packages/design/src/FormManager/DocumentImporter/index.tsx @@ -64,9 +64,9 @@ const DocumentImporter = ({ const PDFFileSelect = () => { return (
-
+
+
diff --git a/apps/spotlight/src/layouts/ContentLayout.astro b/apps/spotlight/src/layouts/ContentLayout.astro index 864f58d2..bc9a3134 100644 --- a/apps/spotlight/src/layouts/ContentLayout.astro +++ b/apps/spotlight/src/layouts/ContentLayout.astro @@ -8,19 +8,15 @@ const { title } = Astro.props; --- -
-
-
-
-
-
- -
+
+
+
+
+
+
-
-
+
+
diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro index 9b9dc8b9..bf87c867 100644 --- a/apps/spotlight/src/layouts/Layout.astro +++ b/apps/spotlight/src/layouts/Layout.astro @@ -45,13 +45,16 @@ const context = getAppContext(); /> + {title} - -
- -