-
Notifications
You must be signed in to change notification settings - Fork 39
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
8395 [Manage Public Key] Add new route, and basic page #8665
Changes from 3 commits
c3f0fe5
0006c1a
552fc0a
284ebed
22b36ce
7d626ad
832f518
e70b2eb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import React from "react"; | ||
|
||
import { AuthElement } from "../AuthElement"; | ||
import { withCatchAndSuspense } from "../RSErrorBoundary"; | ||
import { MemberType } from "../../hooks/UseOktaMemberships"; | ||
|
||
export function ManagePublicKey() { | ||
return ( | ||
<div className="grid-container margin-bottom-5 tablet:margin-top-6"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Another point is that react-uswds provides some atomic elements for things like the grid container, which I think we should start using despite the fact that they're very thin wrappers around modifier classes. Even if we move off of react-uswds, it'll be easier to make the migration to another library or our own component system if we have one consistent way of treating them now instead of modifier classes. @etanb @jpandersen87 Thoughts? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As long as USWDS' grid is just shortcuts to flexbox (and thus react-uswds' grid) it sounds fine to me. |
||
<div> | ||
penny-lischer marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<h1 className="margin-top-0 margin-bottom-5"> | ||
Manage Public Key | ||
</h1> | ||
<p className="font-sans-md"> | ||
Send your public key to begin the REST API authentication | ||
process. | ||
</p> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export const ManagePublicKeyWithAuth = () => ( | ||
<AuthElement | ||
element={withCatchAndSuspense(<ManagePublicKey />)} | ||
requiredUserType={MemberType.SENDER} | ||
/> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's use paddings instead of margins when we're restricting widths/heights of contents; margins are meant for spacings between elements rather than dictating the descendant content flow, and vertical margins are also susceptible to collapse, which can happen unintentionally especially between top-level elements of components.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just following the way we have it throughout the site but can change it. Will also change from
<div
> to<section>
per your comment below.