void;
+ largeTopMargin?: boolean;
}) {
return render(
);
}
@@ -264,3 +267,28 @@ describe('BmdPaperBallot calls onRendered', () => {
expect(onRendered).toHaveBeenCalledTimes(1);
});
});
+
+test('BmdPaperBallot renders a large top margin when prop is passed', () => {
+ renderBmdPaperBallot({
+ electionDefinition: electionWithMsEitherNeitherDefinition,
+ ballotStyleId: '1',
+ precinctId: '6525',
+ votes: {},
+ largeTopMargin: true,
+ });
+
+ const header = screen.getByTestId('header');
+ expect(header).toHaveStyle(`margin-top: 1.75in`);
+});
+
+test('BmdPaperBallot does not render a large top margin when prop is not passed', () => {
+ renderBmdPaperBallot({
+ electionDefinition: electionWithMsEitherNeitherDefinition,
+ ballotStyleId: '1',
+ precinctId: '6525',
+ votes: {},
+ });
+
+ const header = screen.getByTestId('header');
+ expect(header).not.toHaveStyle(`margin-top: 1.75in`);
+});
diff --git a/libs/ui/src/bmd_paper_ballot.tsx b/libs/ui/src/bmd_paper_ballot.tsx
index 7439e0ff65..c0943582c0 100644
--- a/libs/ui/src/bmd_paper_ballot.tsx
+++ b/libs/ui/src/bmd_paper_ballot.tsx
@@ -51,11 +51,15 @@ const Ballot = styled.div`
}
`;
-const Header = styled.div`
+interface StyledHeaderProps {
+ largeTopMargin?: boolean;
+}
+const Header = styled.div
`
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 0.2em solid #000;
+ margin-top: ${(p) => (p.largeTopMargin ? '1.75in' : undefined)};
& > .seal {
margin: 0.25em 0;
@@ -217,6 +221,7 @@ interface Props {
precinctId: PrecinctId;
votes: VotesDict;
onRendered?: () => void;
+ largeTopMargin?: boolean;
}
/**
@@ -242,6 +247,7 @@ export function BmdPaperBallot({
precinctId,
votes,
onRendered,
+ largeTopMargin,
}: Props): JSX.Element {
const ballotId = generateBallotId();
const {
@@ -275,7 +281,7 @@ export function BmdPaperBallot({
return withPrintTheme(
-