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.

Sign up for GitHub

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

Adjust desktop add edit testimony #1331

Merged
merged 10 commits into from
Oct 13, 2023
Merged

Adjust desktop add edit testimony #1331

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e4cb5e3
Adjust copy on desktop add/edit testimony #1305
Sep 24, 2023
a6083ab
Adjusted add testimony step 1
Sep 25, 2023
db7cb39
Merge branch 'main' of https://github.com/codeforboston/maple into Ad…
Oct 2, 2023
e0ba082
Added side note for write testimony
Oct 3, 2023
2d2c744
Added text for submit testimony
Oct 3, 2023
b19bbfa
Revert "Adjust copy on desktop add/edit testimony #1305"
Oct 3, 2023
288dfcb
Merge branch 'main' of https://github.com/codeforboston/maple into Ad…
Oct 4, 2023
7bb962d
Cleaned up some if statements
Oct 4, 2023
3019351
Fixed build error in StepHeader
Oct 10, 2023
c6a9764
Ran prettier
Oct 11, 2023
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
72 changes: 72 additions & 0 deletions components/publish/KeepNote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import styled from "styled-components"
import { Image } from "../bootstrap"
import { Step } from "./redux"


export const KeepNote = (props:{currentStep:Step}) => {
return (
<NoteContainer>
<HeaderContainer>Keep Note</HeaderContainer>
{(props.currentStep == "selectLegislators" || props.currentStep == "write") ?
<NoteContentForWrite /> : <NoteContentForSend />}
</NoteContainer>
);
}

export const NoteContentForWrite = () => {
return (
<NoteContent>
<div className="text-center">
<Image className="px-5" alt="" src="/mailbox.svg" style={{ transform: "scaleY(0.85)" }}/>
</div>
<NoteSubtitle>Please keep in mind...</NoteSubtitle>
<ul>
<NoteItem><u>We do not send an email for you.</u> This is a preview of what your email to legislators will look like. On the next page, you will be asked to “send email” which will open your email client (e.g., Outlook) and populate an email with your testimony.</NoteItem>
<NoteItem>Your testimony needs to be shared with the right legislators. Your email “To:” box will be populated with the legislators you add here. We've pre-populated this with the most relevant legislators: 1) the Chairs of the Committee reviewing this bill; and 2) your own legislators.</NoteItem>
<NoteItem>When you send this email, you are submitting formal public testimony! As fellow constituents, we thank you for your sharing your voice.</NoteItem>
</ul>
</NoteContent>
);
}

export const NoteContentForSend = () => {
return (
<NoteContent>
<div className="text-center">
<Image className="mx-auto" alt="" src="/computertextblob.svg"/>
</div>
<NoteSubtitle>Rules for Testimony on MAPLE:</NoteSubtitle>
<ul style={{color: "var(--bs-blue)"}}>
<NoteItem>You can edit your testimony up to 5 times but the previous versions will remain available.</NoteItem>
<NoteItem>Since MAPLE is an archive you cannot remove your testimony from the site.</NoteItem>
<NoteItem>Don't forget to send the email to your legislator.</NoteItem>
</ul>
</NoteContent>
);
}

const NoteContainer = styled.div`
background: var(--bs-body-bg);
display: flex;
flex-direction: column;
padding: 0rem 0rem 1rem 0rem;
height: 100%;
`,
HeaderContainer = styled.h4`
background: var(--bs-orange);
color: var(--bs-white);
padding: 1rem 0rem 1rem 0rem;
text-align: center;
`,
NoteSubtitle = styled.p`
color: var(--bs-blue);
font-weight: 700;
padding: 10px;
`,
NoteContent = styled.div`
line-height: normal;
`,
NoteItem = styled.li`
margin-top: 20px;
font-weight: 500;
`
1 change: 1 addition & 0 deletions components/publish/PublishTestimony.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export const PublishTestimony = styled(({ ...rest }) => {
left={<nav.Previous />}
right={<PublishAndSend publish={publish} />}
/>
<p>After clicking “publish” please click “Send Email” to open your email client (e.g., Outlook) and send the email populated with your testimony! Or, click the “copy” buttons to manually copy the testimony and recipients of your email.</p>
</div>
)
})``
Expand Down
7 changes: 5 additions & 2 deletions components/publish/StepChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@ export const StepChip = styled<{
return <div {...rest} />
})`
background-color: var(
${({ active = false }) => (active ? "--bs-green" : "--bs-blue")}
${({ active = false }) => (active ? "--bs-green" : "--bs-white")}
);
font-size: ${({ scale = 1 }) => scale * 1.25}rem;
width: ${({ scale = 1 }) => scale * chipHeight}rem;
height: ${({ scale = 1 }) => scale * chipHeight}rem;
font-style: bold;
color: white;
color: var(${({ active = false }) => (active ? "--bs-white" : "--bs-blue")});
border-style:solid;
border-width: 1px;
border-color: ${({active = false}) => (active ? "transparent" : "var(--bs-blue)")};
border-radius: 50%;
display: flex;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion components/publish/StepHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const StepHeader = styled<{ step?: number }>(
return (
<div {...rest}>
{!!step && (
<StepChip scale={2} className="me-4">
<StepChip scale={2} className="me-4" style={{backgroundColor: "#1A3185", color: "white"}}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is the error logs from the vercel build. This is failing because StepChip props type doesn't include 'style'. 

[12:41:53.237] Failed to compile.
[12:41:53.237] 
[12:41:53.237] ./components/publish/StepHeader.tsx:9:48
[12:41:53.237] Type error: No overload matches this call.
[12:41:53.237]   Overload 1 of 2, '(props: (({ ref?: Ref<Component<PropsWithChildren<{ active?: boolean | undefined; scale?: number | undefined; } & { className?: string | undefined; }>, any, any>> | undefined; ... 4 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }) & { ...; } & ({} | { ...; })) & { ...; }): ReactElement<...>', gave the following error.
[12:41:53.237]     Type '{ children: number; scale: number; className: string; style: { backgroundColor: string; color: string; }; }' is not assignable to type 'IntrinsicAttributes & ((({ ref?: Ref<Component<PropsWithChildren<{ active?: boolean | undefined; scale?: number | undefined; } & { className?: string | undefined; }>, any, any>> | undefined; ... 4 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }) & { ...; } & ({} | { ...; })) & { ...; })'.
[12:41:53.237]       Property 'style' does not exist on type 'IntrinsicAttributes & ((({ ref?: Ref<Component<PropsWithChildren<{ active?: boolean | undefined; scale?: number | undefined; } & { className?: string | undefined; }>, any, any>> | undefined; ... 4 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }) & { ...; } & ({} | { ...; })) & { ...; })'.
[12:41:53.238]   Overload 2 of 2, '(props: StyledComponentPropsWithAs<Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, any, {}, never, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>>): ReactElement<...>', gave the following error.
[12:41:53.238]     Type '{ children: number; scale: number; className: string; style: { backgroundColor: string; color: string; }; }' is not assignable to type 'IntrinsicAttributes & StyledComponentPropsWithAs<Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, any, {}, never, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, Comp<...>>'.
[12:41:53.238]       Property 'style' does not exist on type 'IntrinsicAttributes & StyledComponentPropsWithAs<Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, any, {}, never, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, Comp<...>>'.
[12:41:53.238] 
[12:41:53.238] �[0m �[90m  7 | �[39m      �[33m<�[39m�[33mdiv�[39m {�[33m...�[39mrest}�[33m>�[39m�[0m
[12:41:53.238] �[0m �[90m  8 | �[39m        {�[33m!�[39m�[33m!�[39mstep �[33m&&�[39m (�[0m
[12:41:53.238] �[0m�[31m�[1m>�[22m�[39m�[90m  9 | �[39m          �[33m<�[39m�[33mStepChip�[39m scale�[33m=�[39m{�[35m2�[39m} className�[33m=�[39m�[32m"me-4"�[39m style�[33m=�[39m{{backgroundColor�[33m:�[39m �[32m"#1A3185"�[39m�[33m,�[39m color�[33m:�[39m �[32m"white"�[39m}}�[33m>�[39m�[0m
[12:41:53.238] �[0m �[90m    | �[39m                                               �[31m�[1m^�[22m�[39m�[0m
[12:41:53.238] �[0m �[90m 10 | �[39m            {step}�[0m
[12:41:53.238] �[0m �[90m 11 | �[39m          �[33m<�[39m�[33m/�[39m�[33mStepChip�[39m�[33m>�[39m�[0m
[12:41:53.238] �[0m �[90m 12 | �[39m        )}�[0m
[12:41:53.355] error Command failed with exit code 1.
[12:41:53.355] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[12:41:53.380] Error: Command "yarn run vercel-build" exited with 1

One way to resolve this error, since it's already a styled component, would be to extend it using styledcomponents when you need to: https://styled-components.com/docs/basics#extending-styles

{step}
</StepChip>
)}
Expand Down
22 changes: 13 additions & 9 deletions components/publish/SubmitTestimonyForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Step } from "./redux"
import { SelectLegislatorsCta } from "./SelectLegislatorsCta"
import { ShareTestimony } from "./ShareTestimony"
import { WriteTestimony } from "./WriteTestimony"
import { KeepNote } from "./KeepNote"

const Background = styled.div`
background: linear-gradient(to right, white 50%, var(--bs-body-bg) 50%);
Expand All @@ -33,10 +34,13 @@ export const SubmitTestimonyForm = () => {
<Form step={form.step} bill={form.bill} synced={form.synced} />
</Col>
<Col xs={3}>
{["publish", "share"].includes(form.step) ? (
<PublishInfo />
) : (
<QuickInfo bill={form.bill} profile={form.profile} />
{form.step == "position" ? (
["publish", "share"].includes(form.step) ? (
<PublishInfo />
kiminkim724 marked this conversation as resolved.
Show resolved Hide resolved
) : (
<QuickInfo bill={form.bill} profile={form.profile} />
)) : (
<KeepNote currentStep={form.step} />
)}
</Col>
</Row>
Expand Down Expand Up @@ -93,12 +97,12 @@ const Form = ({
const Overview = ({ className }: { className: string }) => (
<div className={clsx("d-flex", className)}>
<div>
<h1>Write your Testimony</h1>
<h1>Write, Publish, and Send Your Testimony!</h1>
<Divider className="me-5" />
<div className="mt-2">
Let your voice be heard! MAPLE gives users the ability to send their
unfiltered feedback on bills to legislators, comittees, and other
relevant parties. <b>Writing testimony is as easy as 1-2-3!</b>
<div className="mt-2" style={{fontWeight: "bolder"}}>
Your voice matters. And it's important that you share it. MAPLE helps you
1) write testimony, 2) publish it to our community, and 3) send it to the right
legislators so it can be formally considered. It's easy as 1-2-3!
</div>
</div>
<div>
Expand Down