Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update style of form builder #47

Merged
merged 8 commits into from
Feb 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/workflows/run-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,6 @@ jobs:
shell: bash
run: pnpm test

- name: Vitest Coverage Report
if: always()
uses: davelosert/[email protected]
#- name: Vitest Coverage Report
# if: always()
# uses: davelosert/[email protected]
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
31 changes: 16 additions & 15 deletions apps/spotlight/src/components/Header.astro
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -12,21 +13,21 @@ const getNavLinkClasses = (url: string) => {
};
---

<header class="usa-header usa-header--basic usa-header--megamenu"></header>
<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo">
<em class="usa-logo__text">
<a href={routes.getHomeUrl()} title="10x Access to Justice">
10x Access to Justice
</a>
</em>
</div>
<button type="button" class="usa-menu-btn">Menu</button>
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-logo">
<em class="usa-logo__text">
<a href={routes.getHomeUrl()} title="10x Access to Justice">
<img src={logoSvg.src} role="img" alt="10x Logo" />
<span>Access to Justice Form Builder</span>
</a>
</em>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<button type="button" class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner">
<button type="button" class="usa-nav__close">
<img src={closeSvg.src} role="img" alt="Close" />
</button>
Expand All @@ -52,6 +53,6 @@ const getNavLinkClasses = (url: string) => {
>
</li>
</ul>
</nav>
</div>
</div>
</nav>
</header>
20 changes: 8 additions & 12 deletions apps/spotlight/src/layouts/ContentLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,15 @@ const { title } = Astro.props;
---

<Layout title={title}>
<main id="main-content">
<div class="bg-base-lightest">
<section class="grid-container usa-section">
<div class="grid-row flex-justify-center">
<div class="grid-col-12 tablet:grid-col-12 desktop:grid-col-12">
<div
class="bg-white padding-y-3 padding-x-5 border border-base-lighter"
>
<slot />
</div>
<main class="bg-base-lightest" id="main-content">
<section class="grid-container usa-section">
<div class="grid-row flex-justify-center">
<div class="grid-col-12 tablet:grid-col-12 desktop:grid-col-12">
<div class="bg-white padding-y-3 padding-x-3 border border-base-lighter">
<slot />
</div>
</div>
</section>
</div>
</div>
</section>
</main>
</Layout>
11 changes: 7 additions & 4 deletions apps/spotlight/src/layouts/Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,16 @@ const context = getAppContext();
/>
<link href="/favicon/favicon.ico" rel="shortcut icon" />
<meta name="generator" content={Astro.generator} />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="../lib/initialize.ts"></script>
<title>{title}</title>
</head>
<body>
<UsaBanner />
<Header />
<slot />
<Footer github={context.github} />
<div class="usa-app usa-app__theme-1">
<UsaBanner />
<Header />
<slot />
<Footer github={context.github} />
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion apps/spotlight/src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import DebugTools from '../components/DebugTools';
---

<ContentLayout title="10x Access to Justice Spotlight">
<h1>10x Access to Justice Spotlight</h1>
<h1>Create an interview from a PDF Form</h1>
<AppAvailableFormList client:only />
<DebugTools client:only />
</ContentLayout>
7 changes: 1 addition & 6 deletions apps/spotlight/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
@import '@atj/design/static/uswds/styles/styles.css';

.usa-form--large {
max-width: 32rem;
}

.usa-legend {
max-width: 100%;
}

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@
"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",
"vitest-github-actions-reporter": "^0.11.1",
"vitest-mock-extended": "^1.3.1"
},
"dependencies": {
"astro": "^4.3.3"
"astro": "^4.3.5"
}
}
5 changes: 5 additions & 0 deletions packages/design/images/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading