add support for short and long descs

Author: sh1mmer

src/components/QuestionSection.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+const QuestionSection = (props) => {
+    return ( 
+        <div>
+        <h1>{props.questionText}</h1>
+        {props.shortDesc ?
+          <div class="shortDesc"><p>{props.shortDesc}</p></div>
+        :
+          <></>
+        }
+        {props.longDesc ? 
+          <div class="longDesc"><details><summary>Learn more about this question</summary>{props.longDesc}</details></div>
+        :
+          <></>
+        }
+        <br />
+        {props.children}
+        </div>
+        
+    );
+}
+
+export default QuestionSection;

src/components/clauses/YesNoState.js

@@ -3,7 +3,7 @@ import React from "react";
 import AppContext from "../AppContext";
 import { navigate } from "gatsby";
 
-const YesNoState = ({ stateName, questionText, yesText, noText, yes, no }) => {
+const YesNoState = ({ stateName, questionText, yesText, noText, yes, no, shortDesc, longDesc }) => {
   var dict = {
     en: { yes: "Yes", no: "No" },
     es: { yes: "Si", no: "No" }
@@ -27,7 +27,11 @@ const YesNoState = ({ stateName, questionText, yesText, noText, yes, no }) => {
       {({ appCtx, updateContext }) => {
         return (
           <div>
-            <p>{questionText}</p>
+            { questionText ?
+            <h2>{questionText}</h2>
+            :
+            <></>
+            }
             <StyledPrimaryButton
               onClick={e => {
                 onChange(true, appCtx, updateContext);

src/pages/eligibility/index.mdx

@@ -1,7 +1,11 @@
 import Zip from "../../components/Zip"
 import FlowSelector from "../../components/FlowSelector"
+import QuestionSection from "../../components/QuestionSection"
 
-What's your zip code? Depending on where you live, different laws can apply. Your zip code can help us figure out which protections may apply to you.
-
-<Zip /><p></p>
+<QuestionSection
+  questionText="What's your zip code?"
+  shortDesc="Depending on where you live, different laws can apply. Your zip code can help us figure out which protections may apply to you."
+>
+<p><Zip /></p>
 <FlowSelector errText="Please enter a valid California ZIP code" btnText="Look up!" />
+</QuestionSection>

src/pages/eligibility/state/index.mdx

@@ -1,8 +1,14 @@
 import YesNoState from "../../../components/clauses/YesNoState";
+import QuestionSection from "../../../components/QuestionSection";
 
+<QuestionSection
+  questionText="Has everyone in your home lived there for at least 1 year (12 months), or, has at least 1 person lived in your home continuously for at least 2 years (24 months)?"
+  longDesc={<><p>This questions helps us validate some criteria around eviction protections. In order to recieve 'just-cause' eviction protection everyone must have been a tenant for at least 1+ years (12+ months), or one of the tenants must have been a tenant for 2+ years (24+ months). When working out who is a tenant you shouldn't include children (under the age of 18) or elderly dependants (who live with a legal guardian).</p><p><strong>For example:</strong> Brian lives with his partner Maxine, their daughter Roxy and Brian's son Jake. Brian, Maxine and Roxy have been living in their unit for 14 months but Jake has only been living with Brian and Maxine for 6 months. Since Brian and Maxine have been been living in the unit for more than a year, and Roxy and Jake are both children then all the tenants have been in the unit for more than a year. Brian should answer 'yes' to this question.</p></>}
+>
 <YesNoState
   yes="/eligibility/state/ineligibleType"
   no="/eligibility/state/ineligibleType"
-  questionText="Has everyone in your home lived there for at least 1 year (12 months), or, has at least 1 person lived in your home continuously for at least 2 years (24 months)?"
+  questionText=""
   stateName="ab1482TenancyDuration"
-/>
+/>
+</QuestionSection>

src/pages/eligibility/state/ineligibleType.mdx

@@ -1,8 +1,17 @@
 import YesNoState from "../../../components/clauses/YesNoState";
+import QuestionSection from "../../../components/QuestionSection"
 
+<QuestionSection
+questionText="Are you renting subsidized housing or a school dorm?"
+shortDesc="Include buildings with LIHTC, or other goverment subsidies."
+longDesc={<><p>Buildings that recieve goverment subsidies, as well as some other types of building such as school dorms are exempt from the Tenant Protection Act 2019.</p>
+<p>If you rent a school dorm only answer yes if it is owned by the school you go to, do not include dorms owned by private landlords. Schools must be either K-12 or accredited higher education colleges.</p>
+<p>If you live in housing subsidized by a government program click yes.</p> 
+<p>This question helps us understand if you may live in a unit that isn't eligible for some or all of the protections in the Tenant Protection Act. That said, most of the units that are exempt from the Teant Protection Act have other forms of protections that you may be eligble for. If in doubt reach out for support to a local housing rights group. Once you finish these eligibility questions we'll give you an easy way to connect with one.</p></>}
+>
 <YesNoState
   yes="/eligibility/state/vouchers"
   no="/eligibility/state/buildingAge"
-  questionText="Are you renting subsidized housing or a college/school dorm? This includes buildings with LIHTC."
   stateName="ineligibleType"
 />
+</QuestionSection>