dynamic padding

src/components/Date.fixture.tsx

@@ -9,6 +9,7 @@ export default (
       includeSubmit={false}
       title="Date"
       type="number"
+      topSpacing={0}
       name="date"
       options={["day", "month", "year"]}
       inputProps={{

src/components/Date.tsx

@@ -15,6 +15,7 @@ interface IDate {
   type: string;
   options: string[];
   inputProps: ILimits;
+  topSpacing?: number;
   includeSubmit?: boolean;
 }
 interface ILimits {
@@ -28,6 +29,7 @@ export const Date: React.FC<IDate> = ({
   name,
   options,
   inputProps,
+  topSpacing,
   includeSubmit = false
 }) => {
   const formik = useFormik({
@@ -37,7 +39,7 @@ export const Date: React.FC<IDate> = ({
     }
   });
   return (
-    <Box py={4}>
+    <Box py={topSpacing || 4}>
       <FocusWithin>
         {({ isFocused, getFocusProps }) => (
           <form onSubmit={formik.handleSubmit} {...getFocusProps()}>

src/components/StreetAddress.fixture.tsx

@@ -8,6 +8,7 @@ export default (
     <StreetAddress
       title="Street Address"
       type="text"
+      topSpacing={1}
       options={["building", "street", "city", "country", "nation", "postcode"]}
       includeLookup={false}
     />

src/components/StreetAddress.tsx

@@ -18,6 +18,7 @@ interface IStreetAddress {
   type: string;
   options: string[];
   includeLookup?: boolean;
+  topSpacing?: number;
 }
 const nations: string[] = [
   "nation1",
@@ -30,7 +31,8 @@ export const StreetAddress: React.FC<IStreetAddress> = ({
   title,
   type,
   options,
-  includeLookup = false
+  includeLookup = false,
+  topSpacing
 }) => {
   const [errorMessageVisible, setErrorMessageVisible] = React.useState(false);
   const [successMessageVisible, setSuccessMessageVisible] = React.useState(
@@ -87,7 +89,7 @@ export const StreetAddress: React.FC<IStreetAddress> = ({
     <FocusWithin>
       {({ isFocused, getFocusProps }) => (
         <div {...getFocusProps()}>
-          <Box py={4} maxWidth={480}>
+          <Box py={topSpacing || 4} maxWidth={480}>
             <form
               data-testid="streetAddressForm"
               onSubmit={formik.handleSubmit}

src/components/Text.fixture.tsx

@@ -7,6 +7,7 @@ export default {
   "Short Text": (
     <Box bgcolor="background.paper" px={4}>
       <Text
+        topSpacing={1}
         title="Short Text Input"
         multiline={false}
         type="text"
@@ -21,6 +22,7 @@ export default {
   "Long Text": (
     <Box bgcolor="background.paper" px={4}>
       <Text
+        topSpacing={1}
         title="Long Text Input"
         multiline
         fullWidth
@@ -37,6 +39,7 @@ export default {
   Email: (
     <Box bgcolor="background.paper" px={4}>
       <Text
+        topSpacing={1}
         title="Email"
         label="Email Address"
         placeholder="[email protected]"
@@ -50,6 +53,7 @@ export default {
   Number: (
     <Box bgcolor="background.paper" px={4}>
       <Text
+        topSpacing={1}
         title="Number"
         label="Number"
         fullWidth={false}

src/components/Text.tsx

@@ -25,13 +25,15 @@ interface IText {
   unit?: string;
   min?: string;
   max?: string;
+  topSpacing?: number;
   maxWords?: number;
   inputProps?: IMinMax;
   includeSubmit?: boolean;
 }
 
 export const Text: React.FC<IText> = ({
   title,
+  topSpacing,
   label = false,
   fullWidth = true,
   placeholder = "",
@@ -73,7 +75,7 @@ export const Text: React.FC<IText> = ({
     <FocusWithin>
       {({ isFocused, getFocusProps }) => (
         <div {...getFocusProps()}>
-          <Box py={4} maxWidth={480}>
+          <Box py={topSpacing || 4} maxWidth={480}>
             <form data-testid="textForm" onSubmit={formik.handleSubmit}>
               {title && (
                 <Box mb={1.5}>

src/pages/SignIn.fixture.tsx

@@ -2,4 +2,4 @@ import * as React from "react";
 
 import SignIn from "./SignIn";
 
-export default <SignIn fullPage={false} />;
+export default <SignIn topSpacing={1} title="Sign In" fullPage={false} />;

src/pages/SignIn.tsx

@@ -17,8 +17,10 @@ const useStyles = makeStyles({
 });
 interface ISignIn {
   fullPage?: boolean;
+  topSpacing?: number;
+  title?: string;
 }
-const SignIn: React.FC<ISignIn> = ({ fullPage }) => {
+const SignIn: React.FC<ISignIn> = ({ fullPage, topSpacing, title }) => {
   const [email, setEmail] = React.useState("");
   const set = useStore(state => state.set);
 
@@ -31,10 +33,12 @@ const SignIn: React.FC<ISignIn> = ({ fullPage }) => {
   };
   const signInComponent = () => {
     return (
-      <Box maxWidth={400}>
-        <Typography component="h1" variant="h3" gutterBottom>
-          <strong>Sign in</strong>
-        </Typography>
+      <Box py={topSpacing} maxWidth={400}>
+        {title && (
+          <Typography component="h1" variant="h3" gutterBottom>
+            <strong>{title}</strong>
+          </Typography>
+        )}
         <Box pb={2}>
           Sign in or{" "}
           <a href="#" className={classes.link}>